【月夜特效------附 效果+源代码】

其他 2021-11-18 09:40:24 阅读次数: 0

目录

效果

在这里插入图片描述

源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  @-webkit-keyframes float {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
  25% {
      
      
    -webkit-transform: translateX(20px) translateY(0);
            transform: translateX(20px) translateY(0);
  }
  50% {
      
      
    -webkit-transform: translateX(0) translateY(-10px);
            transform: translateX(0) translateY(-10px);
  }
  75% {
      
      
    -webkit-transform: translateX(-20px) translateY(0);
            transform: translateX(-20px) translateY(0);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
}
@keyframes float {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
  25% {
      
      
    -webkit-transform: translateX(20px) translateY(0);
            transform: translateX(20px) translateY(0);
  }
  50% {
      
      
    -webkit-transform: translateX(0) translateY(-10px);
            transform: translateX(0) translateY(-10px);
  }
  75% {
      
      
    -webkit-transform: translateX(-20px) translateY(0);
            transform: translateX(-20px) translateY(0);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
}
@-webkit-keyframes fireFront {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-5px);
            transform: translateX(2.5px) translateY(-5px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-15px);
            transform: translateX(0) translateY(-15px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-20px);
            transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-25px);
            transform: translateX(0) translateY(-25px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-30px);
            transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-35px);
            transform: translateX(0) translateY(-35px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-40px);
            transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-45px);
            transform: translateX(0) translateY(-45px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-55px);
            transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@keyframes fireFront {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-5px);
            transform: translateX(2.5px) translateY(-5px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-15px);
            transform: translateX(0) translateY(-15px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-20px);
            transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-25px);
            transform: translateX(0) translateY(-25px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-30px);
            transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-35px);
            transform: translateX(0) translateY(-35px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-40px);
            transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-45px);
            transform: translateX(0) translateY(-45px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-55px);
            transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@-webkit-keyframes fireMid {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-10px);
            transform: translateX(2.5px) translateY(-10px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-20px);
            transform: translateX(0) translateY(-20px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-30px);
            transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-60px);
            transform: translateX(0) translateY(-60px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-70px);
            transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-90px);
            transform: translateX(2.5px) translateY(-90px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-100px);
            transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@keyframes fireMid {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-10px);
            transform: translateX(2.5px) translateY(-10px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-20px);
            transform: translateX(0) translateY(-20px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-30px);
            transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-60px);
            transform: translateX(0) translateY(-60px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-70px);
            transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-90px);
            transform: translateX(2.5px) translateY(-90px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-100px);
            transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@-webkit-keyframes fireBack {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-20px);
            transform: translateX(2.5px) translateY(-20px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-60px);
            transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-100px);
            transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-120px);
            transform: translateX(0) translateY(-120px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-140px);
            transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-160px);
            transform: translateX(0) translateY(-160px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-180px);
            transform: translateX(2.5px) translateY(-180px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-200px);
            transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}
@keyframes fireBack {
      
      
  0% {
      
      
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-20px);
            transform: translateX(2.5px) translateY(-20px);
  }
  20% {
      
      
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  30% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-60px);
            transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
      
      
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  50% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-100px);
            transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
      
      
    -webkit-transform: translateX(0) translateY(-120px);
            transform: translateX(0) translateY(-120px);
  }
  70% {
      
      
    -webkit-transform: translateX(-2.5px) translateY(-140px);
            transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
      
      
    -webkit-transform: translateX(0) translateY(-160px);
            transform: translateX(0) translateY(-160px);
  }
  90% {
      
      
    -webkit-transform: translateX(2.5px) translateY(-180px);
            transform: translateX(2.5px) translateY(-180px);
  }
  100% {
      
      
    -webkit-transform: translateX(0) translateY(-200px);
            transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}
html, body {
      
      
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

body {
      
      
  background: #1a252f;
}

.container {
      
      
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}
.container .fire {
      
      
  width: 320px;
  min-width: 300px;
  height: 320px;
  min-height: 300px;
  position: relative;
  -webkit-animation: float 30s ease-in-out infinite;
          animation: float 30s ease-in-out infinite;
}
.container .fire.debug {
      
      
  border: 1px solid red;
}
.container .fire.debug .fire-front span,
.container .fire.debug .fire-mid span,
.container .fire.debug .fire-back span {
      
      
  background: none;
  border-radius: 0px;
  border: 1px solid blue;
}
.container .fire.debug .fireplace {
      
      
  border: 1px solid yellow;
}
.container .fire.debug .fireplace img {
      
      
  display: none;
}
.container .fire .fire-front {
      
      
  position: absolute;
  width: 60px;
  height: 120px;
  bottom: 20px;
  left: 50%;
  margin-left: -30px;
  z-index: 4;
}
.container .fire .fire-front span {
      
      
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #ecf0f1;
  background: radial-gradient(ellipse at center, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireFront;
          animation-name: fireFront;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fire-mid {
      
      
  position: absolute;
  width: 100px;
  height: 180px;
  bottom: 15px;
  left: 50%;
  margin-left: -50px;
  z-index: 3;
}
.container .fire .fire-mid span {
      
      
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #f1c40f;
  background: radial-gradient(ellipse at center, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireMid;
          animation-name: fireMid;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fire-back {
      
      
  position: absolute;
  width: 140px;
  height: 240px;
  bottom: 5px;
  left: 50%;
  margin-left: -70px;
  z-index: 2;
}
.container .fire .fire-back span {
      
      
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #e67e22;
  background: radial-gradient(ellipse at center, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireBack;
          animation-name: fireBack;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fireplace {
      
      
  width: 300px;
  height: 100px;
  position: absolute;
  bottom: -30px;
  left: 10px;
  z-index: 0;
}
.container .fire .fireplace > img {
      
      
  width: 100%;
  height: auto;
}

.background {
      
      
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/background-fireplace.svg");
  background-repeat: no-repeat;
  background-size: 1024px 800px;
  background-position: center;
  position: absolute;
  top: 0;
  left: -40px;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: float 30s ease-in-out infinite;
          animation: float 30s ease-in-out infinite;
  z-index: 1;
}

.moon {
      
      
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -300px;
  width: 400px;
  height: 400px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/moon.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

  </style>
 </HEAD>

 <BODY>
  <div class="container">
	<div class="fire">
		<div id="fireFront" class="fire-front"></div>
		<div id="fireMid" class="fire-mid"></div>
		<div id="fireBack" class="fire-back"></div>
		<div class="fireplace"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/fireplace.svg" alt="Fire Place" /></div>
	</div>
</div>

<div class="background"></div>
<div class="moon"></div>
<script>
/*
 The javascript aims to create the necessary particles
 and give them dynamic values such as, size and placement
 for the fire effect but all animation are handeled by
 css for an easier control in the behaviour
*/

//set vars
const fireFrontContainer = document.getElementById('fireFront');
const fireMidContainer = document.getElementById('fireMid');
const fireBackContainer = document.getElementById('fireBack');

var NPFireFront = rand(10,15);
var arrayPFireFront = [];
var NPFireMid = rand(80,100);
var arrayPFireMid = [];
var NPFireBack = rand(100,140);
var arrayPFireBack = [];

while ( arrayPFireFront.length < NPFireFront ) {
      
      
	var fireParticle = new FireParticle('front');
	arrayPFireFront.push(fireParticle);
	fireFrontContainer.innerHTML += fireParticle.html;
}

while ( arrayPFireMid.length < NPFireMid ) {
      
      
	var fireParticle = new FireParticle('mid');
	arrayPFireMid.push(fireParticle);
	fireMidContainer.innerHTML += fireParticle.html;
}

while ( arrayPFireBack.length < NPFireBack ) {
      
      
	var fireParticle = new FireParticle('back');
	arrayPFireBack.push(fireParticle);
	fireBackContainer.innerHTML += fireParticle.html;
}

function FireParticle(type) {
      
      
	if ( type === 'front' ) {
      
      
		this.radius = rand(1, 15);
		this.margin = this.radius / 2;
		this.spped = randInt(1, 1.5);	
		this.delay = randInt(1, 2);
		this.y = randInt(0.5,1);
		this.x = randInt(40,60);
	} else if ( type === 'mid' ) {
      
      
		this.radius = rand(10, 30);
		this.margin = this.radius / 2;
		this.spped = randInt(0.2, 0.6);
		this.delay = randInt(0.5, 1);
		this.y = randInt(0.25,0.5);
		this.x = randInt(35,65);
	} else if ( type == 'back' ) {
      
      
		this.radius = rand(10, 40);
		this.margin = this.radius / 2;
		this.spped = randInt(0.6, 0.8);
		this.delay = randInt(0, 0.5);
		this.y = randInt(0, 0.5);
		this.x = randInt(35,65);
	}
	this.html = '<span style="width: '+this.radius+'px; height: '+this.radius+'px; left: '+this.x+'%; bottom: '+this.y+'%; margin-left: -'+this.margin+'px; animation-delay: '+this.delay+'s; animation-speed: '+this.speed+'s"></span>';
}

function rand(min, max) {
      
      
	return Math.floor(Math.random() * (max - min)) + min;
}

function randInt(min, max) {
      
      
	return Math.random() * (max - min) + min;
}
</script>
 </BODY>
</HTML>

猜你喜欢

转载自blog.csdn.net/qq_44731019/article/details/120254098
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022