假设img文件夹里有以下三张图片(bg_effect_01.png,bg_effect_02.png,bg_effect_03.png):
用css实现动态梦幻气泡背景 也可以改成雪花
用css实现动态梦幻气泡背景 也可以改成雪花
用css实现动态梦幻气泡背景 也可以改成雪花
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>

相关文章:

  • 2021-12-06
  • 2021-10-01
  • 2022-12-23
  • 2021-06-21
  • 2021-12-15
  • 2022-01-04
  • 2021-11-27
  • 2022-02-15
猜你喜欢
  • 2022-01-09
  • 2021-12-05
  • 2021-09-21
  • 2022-12-23
  • 2021-08-25
  • 2022-01-02
  • 2021-06-26
相关资源
相似解决方案