七夕节快乐--来自于程序员的表达
记录一起走过的那些日子
讲述和亲爱的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(?developer/article/2167747/"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>本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录