记录一起走过的那些日子
讲述和亲爱的TA一起经历的那些故事
- 那些初见印象
- 那些浪漫的开始
- 那些铭记于心的大小事
- 那些经历的曲折
- 那些经历的幸福与快乐
- 那些珍贵的瞬间
- 那些对未来的期许/计划
…
创意代码表白
以程序员的方式撒狗粮，专业浪漫，值得拥有！
html：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>自取标题</title> <style type="text/css"> *{padding: 0; margin: 0;} body,html{height:100%;} body{background-image: url("images/beijing.jpg");background-size: 100% 100%;} #box{width: 280px; height: 400px; position: fixed; left: 0; right: 0; top:0; bottom: 0; margin: auto; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); animation: go 45s linear infinite; } #box img{width: 280px; height: 400px; position: absolute; left: 0; top: 0; } #box img:nth-child(1){ transform: rotateY(0deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(2){ transform: rotateY(36deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(3){ transform: rotateY(72deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(4){ transform: rotateY(108deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(5){ transform: rotateY(144deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(6){ transform: rotateY(180deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(7){ transform: rotateY(216deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(8){ transform: rotateY(252deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(9){ transform: rotateY(288deg) translateZ(650px);text-rendering: auto;} #box img:nth-child(10){ transform: rotateY(324deg) translateZ(650px);text-rendering: auto;} @keyframes go { 0%{transform: rotateX(0deg) rotateY(0deg);} 25%{transform: rotateX(20deg) rotateY(180deg);} 50%{transform: rotateX(0deg) rotateY(360deg);} 75%{transform: rotateX(-20deg) rotateY(540deg);} 100%{transform: rotateX(0deg) rotateY(720deg);} } </style> </head> <body> <div id="box"> 自己更换图片 <img src="images/1.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/2.jpg" alt="你陪着我的时候，我从没羡慕过任何人。" title="爱你呢"/> <img src="images/3.jpg" alt="遇到你，是我一生的缘分；牵着你，是我一生的快乐；爱上你，是我一生的幸运。今生有你相伴，是我一生的幸福。" title="爱你呢"/> <img src="images/4.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/5.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/6.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/7.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/8.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/9.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> <img src="images/10.jpg" alt="总想把世界上最好的都给你，却发现世界最好的就是你。" title="爱你呢"/> </div> <div class="hovertree"></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.fireworks.js"></script> <script type="text/javascript"> $('.hovertree').fireworks({ sound: true, // sound effect opacity: 0.3, width: '100%', height: '100%' }); </script> </body> </html>
