心型特效
<!DOCTYPE html> <html lang="en"> <head 'content-type' : 'application/x-www-form-urlencoded'> <meta charset="UTF-8"> <title>我爱你</title> <style type="text/css"> *{ margin: 0px; border: 0px; } body{ overflow: hidden; background-color: #000000; } .container{ position: relative; left: 0; top: 0; bottom: 0; right: 0; margin: auto; height: 260px; width: 200px; transform-origin: 50% 130%; transform-style: preserve-3d; animation: 8s rotate linear infinite; } @keyframes rotate{ from{ transform:rotateX(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateY(360deg); } } .container1{ position: relative; left: 0; top: 0; bottom: 0; right: 0; margin: auto; height: 260px; width: 200px; transform-origin: 50% 130%; transform-style: preserve-3d; animation: 8s rotate linear infinite; } @keyframes rotate{ from{ transform: rotateX(360deg) rotateY(360deg); } to{ transform:rotateX(0deg) rotateY(0deg); } } .square{ position: relative; width: 200px; height: 200px; transform:translateX(70px) translateY(300px) translateZ(110px); transform-style: preserve-3d; } .square div{ position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .square div:nth-child(1){ top: 200px; transform-origin: top; transform:rotateX(-90deg); } .square div:nth-child(2){ left: 200px; transform-origin: left; transform:rotateY(90deg); } .square div:nth-child(3){ left: -200px; transform-origin: right; transform:rotateY(-90deg); } .square div:nth-child(4){ top: -200px; transform-origin: bottom; transform:rotateX(90deg); } .square div:nth-child(6){ top:0; transform:translateZ(-100px); } .square div:nth-child(5){ } .heart{ position: absolute; top:0; left:0; height: 380px; width: 320px; border: 20px solid #ea80b0; margin: 200px auto; border-radius: 50% 50% 50%/50% 50% 0%; border-bottom: 0; border-left: 0; } .heart1{ position: absolute; top:0; left:0; height: 190px; width: 160px; border: 4px solid #ea80b0; margin: 200px auto; border-radius: 50% 50% 0%/50% 50% 0%; border-bottom: 0; border-left: 0; } img{ width: 200px; height: 200px; } </style> </head> <body background="images/8.gif"> <div class="container"> <div class="square"> <div><img src="./images/1.jpg"></div> <div><img src="./images/2.jpg"></div> <div><img src="./images/3.jpg"></div> <div><img src="./images/4.jpg"></div> <div><img src="./images/5.jpg"></div> <div><img src="./images/6.jpg"></div> </div> </div> <!-- <div class="container1"> <div class="square"> <div><img src="./images/1.jpg"></div> <div><img src="./images/2.jpg"></div> <div><img src="./images/3.jpg"></div> <div><img src="./images/4.jpg"></div> <div><img src="./images/5.jpg"></div> <div><img src="./images/6.jpg"></div> </div> </div> --> <div style="position:absolute; width: 60%; top:80%; left:20%; text-align: center;"> <b style=" transform:translateY(-50%); font-family: 'Love Ya Like A Sister', cursive; font-size: 40px; color: #ffaa00; padding: 0 20px;">得一人心,白首不分离</b> </div> <canvas></canvas> <script type="text/javascript"> var container = document.getElementsByClassName("container")[0]; // var container1 = document.getElementsByClassName("container1")[0]; for (var i = 0;i < 36;i++) { var heart = document.createElement("div"); heart.className = "heart"; heart.style.transform = "rotateY("+i*80+"deg) rotateZ(45deg) translateX(20px)"; container.appendChild(heart); // var heart1 = document.createElement("div"); // heart1.className = "heart1"; // heart1.style.transform = "rotateY("+i*80+"deg) rotateZ(45deg) translateX(20px)"; // container1.appendChild(heart1); } </script> <audio autoplay="autopaly" loop="loop" id="audios" preload="auto"> <source src="http://music.163.com/song/media/outer/url?id=1827600686.mp3" type="audio/mp3" /> </audio> </body> </html>