css实现森林中萤火虫飞舞动画效果代码-html代码-BFW代码库

css实现森林中萤火虫飞舞动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现森林中萤火虫飞舞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root,
html {
  font-size: 62.5%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.frame {
  position: relative;
  height: 40rem;
  width: 40rem;
  background: linear-gradient(to top, rgba(0, 0, 56, 0.3), rgba(179, 179, 177, 0.3)), url("//repo.bfw.wiki/bfwrepo/image/6286c8f77388a.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.frame::before {
  content: "FIREFLIES IN THE FOREST";
  font-size: 1.5rem;
  color: #fff;
  position: absolute;
  top: 2rem;
  left: 12rem;
  text-shadow: 0 0 0.5rem #000;
}

.fly {
  position: absolute;
}
.fly-1 {
  top: 77%;
  left: 22%;
  animation: flying 42s ease-in-out -8.8s infinite alternate;
}
.fly-2 {
  top: 35%;
  left: 63%;
  animation: flying 31s ease-in-out -7.2s infinite alternate;
}
.fly-3 {
  top: 92%;
  left: 15%;
  animation: flying 42s ease-in-out -1.1s infinite alternate;
}
.fly-4 {
  top: 53%;
  left: 29%;
  animation: flying 66s ease-in-out -5.7s infinite alternate;
}
.fly-5 {
  top: 95%;
  left: 57%;
  animation: flying 43s ease-in-out -5.5s infinite alternate;
}
.fly-6 {
  top: 17%;
  left: 41%;
  animation: flying 64s ease-in-out -1.1s infinite alternate;
}
.fly-7 {
  top: 88%;
  left: 26%;
  animation: flying 25s ease-in-out -5.7s infinite alternate;
}
.fly-8 {
  top.........完整代码请登录后点击上方下载按钮下载查看