我渐渐的迷上了 HTML5 的动画,它总能给我带来很大惊喜。今天继续为大家分享一款使用 HTML5 动画制作的 3D 翻转立方体效果。本文将为大家介绍 HTML5 动画的制作过程。
网上基于 HTML5 的立方体动画有很多,有些是基于 Canvas 的动画特效,比如HTML5 webkit 3D立方体图片旋转滑块。这次要分享的这款HTML5 3D立方体动画比较普通,它可以自己不停的旋转以凸显其3D的魅力。
HTML5 翻转立方体 动画
上面这张图是该动画运行效果的一个截图。全部实现代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 3D立方体动画||www.xttblog.com</title> <style type="text/css"> body{ background: #1a1a1a; -webkit-perspective: 600px; } .cube{ width: 150px; height: 150px; position: relative; top: 100px; left: 50%; margin-left: -75px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg) translateZ(-200px); -webkit-animation-name: rotationMainContainer; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: running; } .cube-face{ width: 150px; height: 150px; position: absolute; opacity: .95; background: #ff033e; -webkit-transform-origin: 50% 50%; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: running; } .cube-face-front{ -webkit-transform: translateZ(75px); -webkit-animation-name: bgCAFace; } .cube-face-left{ -webkit-transform: rotateY(90deg) translateZ(75px); -webkit-animation-name: bgCALeft; } .cube-face-back{ -webkit-transform: translateZ(-75px); -webkit-animation-name: bgCABack; } .cube-face-right{ -webkit-transform: rotateY(90deg) translateZ(-75px); -webkit-animation-name: bgCARight; } .cube-face-top{ -webkit-transform: rotateX(90deg) translateZ(-75px); -webkit-animation-name: bgCATopBottom; } .cube-face-bottom{ -webkit-transform: rotateX(90deg) translateZ(75px); -webkit-animation-name: bgCATopBottom; } @-webkit-keyframes rotationMainContainer{ 0% { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) } } @-webkit-keyframes bgCAFace{ 0% { background: #7F1041; } 25% { background: #FF6DAD; } 50% { background: #FF2182; } 100% { background: #7F3756; } } @-webkit-keyframes bgCALeft{ 0% { background: #7F3756; } 25% { background: #7F1041; } 50% { background: #FF6DAD; } 100% { background: #FF2182; } } @-webkit-keyframes bgCABack{ 0% { background: #FF2182; } 25% { background: #7F3756; } 50% { background: #7F1041; } 100% { background: #FF6DAD; } } @-webkit-keyframes bgCARight{ 0% { background: #FF6DAD; } 25% { background: #FF2182; } 50% { background: #7F3756; } 100% { background: #7F1041; } } @-webkit-keyframes bgCATopBottom{ 0% { background: #7F0E2D; } 25% { background: #FF6891; } 50% { background: #FF1C5A; } 100% { background: #7F3449; } } </style> </head> <body> <div style="text-align:center;clear:both;"> <script src="/follow.js" type="text/javascript"></script> </div> <div class="cube"> <div class="cube-face cube-face-front"></div> <div class="cube-face cube-face-left"></div> <div class="cube-face cube-face-back"></div> <div class="cube-face cube-face-right"></div> <div class="cube-face cube-face-top"></div> <div class="cube-face cube-face-bottom"></div> </div> </body> </html>
本文没有用到额外的图片,因此就没有共享到百度云盘,希望的鞋童可以自己按照代码思路试一试。
: » HTML5 实现3D翻转立方体
原创文章,作者:1402239773,如若转载,请注明出处:https://blog.ytso.com/251226.html