CSS3 实现的火焰动画

实现效果

实现代码

html

<文徽明习字div class="container">  <div class="red flame"></div>  <div class="orange flame"></div>  <div class="yellow flame"></div>关于数学的故事;  <div class="white flame"></div>  <div class="blue circle"></div>  <div class="black circle"></div></div>

css3

body{  background:black;}.container{  margin:80px auto;  width: 60px;  height: 60px;  position:relative;  transform-origin:center bottom;  animation-name: flicker;  animation-duration:3ms;  animation-delay:200ms;  ani虚词有哪些mation-timing-function: ea-in;  animation-iteration-count: infinite;  animation-direction: alternate;}.flame{  bottom:0;  position:absolute;  border-bottom-right-radius: 50%;  border-bottom-left-radius: 50%;  border-top-left-radius: 50%;  transform:rotate(-45deg) scale(1.5,1.5);}.yellow{  left:15px;   width: 30px;  height: 30px;  background:gold;  box-shadow: 0px 0px 9px 4px gold;}.orange{  left:10px;   width: 40px;  height: 40px;  background:orange;  box-shadow: 0px 0px 9px 4px orange;}.red{  left:5px;  width: 50px;  height: 50px;  background:orangered;  box-shadow: 0px 0px 5px 4px orangered;}.white{  left:15px;   bottom:-4px;  width: 30px;  height: 30px;  background:white;  box-shadow: 0px 0px 9px 4px white;}.circle{  border-radius: 50%;  position:absolute;  }.blue{  width: 10px;  height: 10px;  left:25px;  bottom:-25px;   background: slateblue;  box-shadow: 0px 0px 15px 10px slateblue;}.black{  width: 40px;  he黄焖鸡做法ight: 40px;  left:10px;  bottom:-60px;    background: black;  box-shadow: 0px 0px 15px 10px black;}@keyframes flicker{  0%   {transform: rotate(-1deg);}  20%  {transform: rotate(1deg);}  内接三角形40%  {transform: rotate(-1deg);}  60%  {transform: rotate(1deg) scaley(1.04);}  80%  {transform: rotate(-2deg) scaley(0.92);}  100% {transform: rotate(1deg);}}

以上就是css3 实现的火焰动画的详细内容，更多关于css3 火焰动画的资料请关注www.887551.com其它相关文章！