七夕节快乐--来自于程序员的表达

浅浅的花香味﹌ 2023-10-05 23:14 24阅读 0赞

记录一起走过的那些日子

讲述和亲爱的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>