css实现弹簧火炬火焰动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现弹簧火炬火焰动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { font-size: 0; overflow: hidden; width: 100%; height: 100%; } body{ background:#000; } .container{ margin:88px auto; width: 60px; height: 60px; position:relative; transform-origin:center bottom; animation-name: flicker; animation-duration:3ms; animation-delay:200ms; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: alternate; } .flame:hover{ -webkit-transform: rotateX(30deg); transform: rotateX(30deg); } .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; height: 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);} } .center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin-top:200px; margin-left:40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .plane, .part { width: 0; height: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @-webkit-keyframes main-rotation { 0% { -webkit-transform: rotateX(60deg) rotateZ(0deg); transform: rotateX(60deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(60deg) rotateZ(360deg); transform: rotateX(60deg) rotateZ(360deg); } } @keyframes main-rotation { 0% { -webkit-transform: rotateX(60deg) rotateZ(0deg); transform: rotateX(60deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(60deg) rotateZ(360deg); transform: rotateX(60deg) rotateZ(360deg); } } .view { background: #111; -webkit-perspective: 800; perspective: 800; font-size: 40px; } .plane.main, .main.part { position: absolute; margin: auto; left: 0; right: 0; top: -1em; width: 1em; height: 1em; -webkit-transition: 0.3s; transition: 0.3s; } .view:hover .plane.main, .view:hover .main.part { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); } .part { position: absolute; width: 0.5em; height: 1em; -webkit-animation: magic 1s alternate infinite; animation: magic 1s alternate infinit -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: translateX(50%) skew(0, -10deg) rotateY(20deg) skew(0, 10deg) translateX(50%); transform: translateX(50%) skew(0, -10deg) rotateY(20deg) skew(0, 10deg) translateX(50%); -webkit-transition: 10s ease--in-out; transition: 10s ease--in-out; } .part::before, .part::after { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .part::after { background: linear-gradient(0deg, #fff, gold); } .part::before { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background: linear-gradient(0deg, #fff, gold); } .part:empty::before { border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; } .part:empty::after { border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; } @-webkit-keyframes magic { 0% { -webkit-transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); } 100% { -webkit-transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); } } @keyframes magic { 0% { -webkit-transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); } 100% { -webkit-transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); } } </style> </head> <body> <!-- partial:index.partial.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> <div class="view"> <div class="plane main"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="par.........完整代码请登录后点击上方下载按钮下载查看
网友评论0