用css實現動態夢幻氣泡背景 也可以改成雪花

假設img文件夾裏有以下三張圖片(bg_effect_01.png,bg_effect_02.png,bg_effect_03.png):
bg_effect_01.png
bg_effect_02.png
bg_effect_03.png
HTML部分:

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{background:#000}
.effect{width:100%;height:100vh;animation:effect 20s linear infinite;background-image:url(img/bg_effect_01.png), url(img/bg_effect_02.png), url(img/bg_effect_03.png)}
@keyframes effect{0%{opacity:0}25%{opacity:1}50%{opacity:0.2}75%{opacity:1}100%{opacity:0}0%{background-position:0px 0px, 0px 0px, 0px 0px;}50%{background-position:-100px -500px,-100px -200px,-100px -150px}100%{background-position:0px -1000px,-200px -400px,-100px -300px}}
</style>
</head>
<body>
<div class="effect"></div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章