Nhưng đối với blogspot bạn cũng có thể chơi được trò chơi thư giãn này bằng cách nhấp chuột làm vỡ các bong bóng bay lên từ đáy blog.
Việc cài đặt code cũng không có gì phức tạp và bạn hoàn toàn có thể. Bạn có thể cài ngay trên trang bài viết hoặc trên trang riêng tùy thích hoặc thêm một tiện ích ở đâu đó(sidebar hoặc footer). Khi sủ dụng nên bật chế độ tối.
Cài đặt hiệu ứng Pop Some Bubbles trên blogspot/blogger
Cài trong bài viết hoặc trang riêng
DEMOThêm code sau vào cuối bài viết hoặc trang riêng.
<div id='bubble_machine'></div>
<style>
:root {
--bubbles: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8YRdKIUtajTFwWpPa1bvb0Qy8qSGNa7kPunFjmuu6Fv6sek1GIW53fd6lHeO-F14iheH51KEuHb_B7mtdQLN4Cy3zuhlqJuJEMIIH7EIUrE33Jkku6Qd5n1eMD-BejB1BENNBD3-xUuY/s1600/contentservice-1.png');
}
.post-body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmU03EUIKOBuL3l-QkzBSx3IScLZB6_CBJqAZQyslwhNWuh4zJKQ1iYOWnGttdSn8N9bWw1dHFZ_8_B34UOEtKO5rISpNt7hv9Buh-JxzmLHcnBf7D1Bq8oTojfsTKq9QWndiRLj-sVMo/s1600/contentservice-2.png'), #1486f5;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#bubble_machine {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.bubble {
width: 100px;
aspect-ratio: 1 / 1;
position: absolute;
top: 100%;
left: 0;
pointer-events: all;
cursor: pointer;
filter: drop-shadow(0px 3px 3px rgba(0,0,0,.05));
transform: translateX(-50%);
animation: bubble_float 10s linear forwards;
}
@keyframes bubble_float {
100% {
top: -130px;
transform: translateX(-50%) rotate(360deg);
}
}
.bubble:after {
content:'';
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;
background-image: var(--bubbles);
background-size: auto 100%;
background-position: 0 0;
}
.pop_bubble:after {
animation: pop_bubble .3s steps(6) forwards;
}
@keyframes pop_bubble {
100% {
transform: scale(2);
background-position: -600% 0;
}
}
</style>
<script>
const bm = document.querySelector('#bubble_machine'),
bubble_rate = 500 //milliseconds per release
function addBubble() {
var b = document.createElement('div')
b.className = 'bubble'
b.style.width = (Math.random()*100) + 28 + 'px'
b.style.left = Math.random()*100 + '%'
b.style.animationDuration = Math.floor(Math.random()*10) + 8 + 's'
// b.style.filter = 'hue-rotate('+Math.random()*360+'deg)'
b.onclick = function() {
this.classList.add('pop_bubble')
}
b.onanimationend = function() {
this.remove()
}
bm.appendChild(b)
setTimeout(addBubble, bubble_rate)
}
addBubble()
</script>
.post-body { display: grid; place-items: center; min-height: 100vh; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmU03EUIKOBuL3l-QkzBSx3IScLZB6_CBJqAZQyslwhNWuh4zJKQ1iYOWnGttdSn8N9bWw1dHFZ_8_B34UOEtKO5rISpNt7hv9Buh-JxzmLHcnBf7D1Bq8oTojfsTKq9QWndiRLj-sVMo/s1600/contentservice-2.png'), #1486f5; background-size: auto auto; background-position: 50% 100%; background-repeat: no-repeat; background-attachment: fixed; }
Cài đặt bằng việc thêm một tiện ích Javascript/HTML
DEMOVới việc thêm một tiện ích thuận tiện cho việc nếu không dùng có thể tạm thời tắt hay ẩn tiện ích đó đi hoặc thay đổi màu nền với mã màu đã bôi màu trong code.
<div id='bubble_machine'></div>
<style>/*<![CDATA[*/
:root {
--bubbles: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8YRdKIUtajTFwWpPa1bvb0Qy8qSGNa7kPunFjmuu6Fv6sek1GIW53fd6lHeO-F14iheH51KEuHb_B7mtdQLN4Cy3zuhlqJuJEMIIH7EIUrE33Jkku6Qd5n1eMD-BejB1BENNBD3-xUuY/s1600/contentservice-1.png');
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmU03EUIKOBuL3l-QkzBSx3IScLZB6_CBJqAZQyslwhNWuh4zJKQ1iYOWnGttdSn8N9bWw1dHFZ_8_B34UOEtKO5rISpNt7hv9Buh-JxzmLHcnBf7D1Bq8oTojfsTKq9QWndiRLj-sVMo/s1600/contentservice-2.png'), #e5ebff;
background-size: auto auto;
background-position: 50% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#bubble_machine {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.bubble {
width: 100px;
aspect-ratio: 1 / 1;
position: absolute;
top: 100%;
left: 0;
pointer-events: all;
cursor: pointer;
filter: drop-shadow(0px 3px 3px rgba(0,0,0,.05));
transform: translateX(-50%);
animation: bubble_float 10s linear forwards;
}
@keyframes bubble_float {
100% {
top: -130px;
transform: translateX(-50%) rotate(360deg);
}
}
.bubble:after {
content:'';
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;
background-image: var(--bubbles);
background-size: auto 100%;
background-position: 0 0;
}
.pop_bubble:after {
animation: pop_bubble .3s steps(6) forwards;
}
@keyframes pop_bubble {
100% {
transform: scale(2);
background-position: -600% 0;
}
}
/*]]>*/</style>
<script>/*<![CDATA[*/
const bm = document.querySelector('#bubble_machine'),
bubble_rate = 500 //milliseconds per release
function addBubble() {
var b = document.createElement('div')
b.className = 'bubble'
b.style.width = (Math.random()*100) + 28 + 'px'
b.style.left = Math.random()*100 + '%'
b.style.animationDuration = Math.floor(Math.random()*10) + 8 + 's'
// b.style.filter = 'hue-rotate('+Math.random()*360+'deg)'
b.onclick = function() {
this.classList.add('pop_bubble')
}
b.onanimationend = function() {
this.remove()
}
bm.appendChild(b)
setTimeout(addBubble, bubble_rate)
}
addBubble()
/*]]>*/</script>
Trong phần CSS của code bạn có thể bỏ đi đoạn ảnh nền nếu thấy không cần thiết.
body { display: grid; place-items: center; min-height: 100vh; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmU03EUIKOBuL3l-QkzBSx3IScLZB6_CBJqAZQyslwhNWuh4zJKQ1iYOWnGttdSn8N9bWw1dHFZ_8_B34UOEtKO5rISpNt7hv9Buh-JxzmLHcnBf7D1Bq8oTojfsTKq9QWndiRLj-sVMo/s1600/contentservice-2.png'), #1486f5; background-size: auto auto; background-position: 50% 100%; background-repeat: no-repeat; background-attachment: fixed; }