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

楠黎倾风

已于 2022-08-03 22:05:12 修改

阅读量161

点赞数

分类专栏： Java 文章标签： css html css3

于 2022-08-03 22:02:57 首次发布

本文链接：https://blog.csdn.net/qq_64071654/article/details/126149798

版权

Java 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

记录一起走过的那些日子

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