Html
    Css
    Js

    
                        
 body {
	background:#000;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
}
.flame {
	width:150px;
	height:150px;
	background:linear-gradient(-45deg,red,orange);
	border-radius:150px 150px 0px 150px;
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
	-webkit-animation:.1s flame infinite;
	animation:.1s flame infinite;
	-webkit-filter:blur(10px);
	filter:blur(10px);
	position:relative;
	box-shadow:17px 20px 90px #700;
	border:45px solid black;
	border-left-width:25px;
	border-top-width:25px;
}
.flame:after,.flame:before {
	content:'';
	width:100px;
	height:100px;
	display:block;
	position:absolute;
	background:linear-gradient(-45deg,red,orange);
	-webkit-animation:.2s flame infinite;
	animation:.2s flame infinite;
	-webkit-transform:scale(0.8) rotate(20deg);
	transform:scale(0.8) rotate(20deg);
	border-radius:100px 100px 0px 100px;
	top:20px;
}
.flame:before {
	top:0;
	-webkit-animation-duration:.09s;
	animation-duration:.09s;
	-webkit-transform:scale(0.9) rotate(-15deg) translate(10px,0px);
	transform:scale(0.9) rotate(-15deg) translate(10px,0px);
}
@-webkit-keyframes flame {
	0% {
	height:150px;
	width:150px;
}
50% {
	height:140px;
	width:140px;
}
100% {
	height:150px;
	width:150px;
}
}@keyframes flame {
	0% {
	height:150px;
	width:150px;
}
50% {
	height:140px;
	width:140px;
}
100% {
	height:150px;
	width:150px;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3火焰动画

0