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: 62%;
  left: 83%;
  animation: flying 51s ease-in-out -0.5s infinite alternate;
}
.fly-9 {
  top: 46%;
  left: 36%;
  animation: flying 59s ease-in-out -8.5s infinite alternate;
}
.fly-10 {
  top: 52%;
  left: 100%;
  animation: flying 47s ease-in-out -1.1s infinite alternate;
}
.fly-11 {
  top: 88%;
  left: 33%;
  animation: flying 45s ease-in-out -4.4s infinite alternate;
}
.fly-12 {
  top: 100%;
  left: 83%;
  animation: flying 65s ease-in-out -2.9s infinite alternate;
}
.fly-13 {
  top: 65%;
  left: 67%;
  animation: flying 25s ease-in-out -7.6s infinite alternate;
}
.fly-14 {
  top: 32%;
  left: 16%;
  animation: flying 48s ease-in-out -0.1s infinite alternate;
}
.fly-15 {
  top: 92%;
  left: 64%;
  animation: flying 65s ease-in-out -6.9s infinite alternate;
}
.fly-16 {
  top: 46%;
  left: 20%;
  animation: flying 45s ease-in-out -0.5s infinite alternate;
}
.fly-17 {
  top: 91%;
  left: 17%;
  animation: flying 49s ease-in-out -4.3s infinite alternate;
}
.fly-18 {
  top: 84%;
  left: 54%;
  animation: flying 57s ease-in-out -8.8s infinite alternate;
}
.fly-19 {
  top: 66%;
  left: 72%;
  animation: flying 40s ease-in-out -6.9s infinite alternate;
}
.fly-20 {
  top: 71%;
  left: 85%;
  animation: flying 29s ease-in-out -6.9s infinite alternate;
}
.fly-21 {
  top: 70%;
  left: 19%;
  animation: flying 39s ease-in-out -7.9s infinite alternate;
}
.fly-22 {
  top: 87%;
  left: 22%;
  animation: flying 52s ease-in-out -0.8s infinite alternate;
}
.fly-23 {
  top: 39%;
  left: 63%;
  animation: flying 35s ease-in-out -1.9s infinite alternate;
}
.fly-24 {
  top: 48%;
  left: 46%;
  animation: flying 24s ease-in-out -2.2s infinite alternate;
}
.fly-25 {
  top: 64%;
  left: 14%;
  animation: flying 38s ease-in-out -6s infinite alter.........完整代码请登录后点击上方下载按钮下载查看