HTML5超炫3D旋转效果资源-CSDN文库

共11个文件

jpg：6个

html：3个

mp3：1个

html3d

需积分: 32 133 浏览量 2016-09-11 13:21:37 上传评论 2 收藏 8.93MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

爱心.rar （11个子文件）

爱心

images

2.jpg 13KB

1.jpg 11KB

6.jpg 14KB

3.jpg 11KB

5.jpg 14KB

4.jpg 16KB

mp3

take.mp3 9.02MB

demo2.html 5KB

jquery-1.7.1.min.js 92KB

demo.html 2KB

demo3.html 6KB

<html> <head> <title>爱心图片 </title> <style type="text/css"> *{margin:0px;padding:0px;} body{background-color:black;} .heart3d { width:100px;height:160px; position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:auto; transform-style:preserve-3d; animation:play 15s infinite linear; } .heart3d [class^="heartd"] { margin:0px; padding:0px; width:100px; height:160px; border:solid #ff33ff; border-width:1px 1px 0px 0px; border-radius:50% 50% 0% / 40% 50% 0%; position:absolute; } .heart3d [class$="d1"] { transform:rotateY(10deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d2"] { transform:rotateY(20deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d3"] { transform:rotateY(30deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d4"] { transform:rotateY(40deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d5"] { transform:rotateY(50deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d6"] { transform:rotateY(60deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d7"] { transform:rotateY(70deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d8"] { transform:rotateY(80deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d9"] { transform:rotateY(90deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d10"] { transform:rotateY(100deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d11"] { transform:rotateY(110deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d12"] { transform:rotateY(120deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d13"] { transform:rotateY(130deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d14"] { transform:rotateY(140deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d15"] { transform:rotateY(150deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d16"] { transform:rotateY(160deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d17"] { transform:rotateY(170deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d18"] { transform:rotateY(180deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d19"] { transform:rotateY(190deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d20"] { transform:rotateY(200deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d21"] { transform:rotateY(210deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d22"] { transform:rotateY(220deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d23"] { transform:rotateY(230deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d24"] { transform:rotateY(240deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d25"] { transform:rotateY(250deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d26"] { transform:rotateY(260deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d27"] { transform:rotateY(270deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d28"] { transform:rotateY(280deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d29"] { transform:rotateY(290deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d30"] { transform:rotateY(300deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d31"] { transform:rotateY(310deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d32"] { transform:rotateY(320deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d33"] { transform:rotateY(330deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d34"] { transform:rotateY(340deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d35"] { transform:rotateY(350deg) rotateZ(45deg) translateX(30px); } .heart3d [class$="d36"] { transform:rotateY(360deg) rotateZ(45deg) translateX(30px); } @keyframes play{ from{transform:rotateX(0deg) rotateY(0deg);} to{transform:rotateX(360deg) rotateY(360deg);} } </style> </head> <body> <div class="heart3d"> <div class="heartd1"></div> <div class="heartd2"></div> <div class="heartd3"></div> <div class="heartd4"></div> <div class="heartd5"></div> <div class="heartd6"></div> <div class="heartd7"></div> <div class="heartd8"></div> <div class="heartd9"></div> <div class="heartd10"></div> <div class="heartd11"></div> <div class="heartd12"></div> <div class="heartd13"></div> <div class="heartd14"></div> <div class="heartd15"></div> <div class="heartd16"></div> <div class="heartd17"></div> <div class="heartd18"></div> <div class="heartd19"></div> <div class="heartd20"></div> <div class="heartd21"></div> <div class="heartd22"></div> <div class="heartd23"></div> <div class="heartd24"></div> <div class="heartd25"></div> <div class="heartd26"></div> <div class="heartd27"></div> <div class="heartd28"></div> <div class="heartd29"></div> <div class="heartd30"></div> <div class="heartd31"></div> <div class="heartd32"></div> <div class="heartd33"></div> <div class="heartd34"></div> <div class="heartd35"></div> <div class="heartd36"></div> </div> <script tpye="text/javascript"> var heart3d=document.getElementsByClassName('heart3d')[0]; var child=heart3d.children; function randomcolor() { var r=Math.floor(Math.random()*255); var g=Math.floor(Math.random()*255); var b=Math.floor(Math.random()*255); return "rgb("+r+","+g+","+b+")"; } for(var k=0;k<child.length;k++) { //child[k].style.borderColor=randomcolor(); (function(k){ setInterval(function() {child[k].style.borderColor=randomcolor(); },5) })(k) } </script> </body> </html>

评论收藏

内容反馈