一个温暖的拥抱，一句轻声的问候，一个暖心的笑容，一双坚实的双手，让我们日久天长，健健康康，快乐每一天！祝你们七夕快乐！一个基于html+css制作简易的3D七夕表白旋转相册特效，就当送给你们当作七夕表白的礼物吧！记得送给自己喜欢的人，嘿嘿嘿。
一、3D七夕表白旋转相册特效效果图
二、页面背景设置
*{
padding:0px;
margin:0px;
}
body{
height:100%;
}
body{
/* background-size:100% 100%;按容器比列撑满,图片变形 */
background-image:url("images/3.png")
/* background-size:100% 100%; */
}
#box{
width:280px;
height:400px;
}
position:fixed;
left:0px;
right:0px;
top:0;
bottom:0px;
margin:auto;
transform-style:preserve-3d;
transform:rotateX(0deg) rotateY(0deg);
/* 动画时长: 45s infinite 循环播放 每45s默认循环播放一次
infinite 循环播放 linear 默认循环一次 */
三、animation属性的作用
animation: go 45s linear infinite;
#box img{
width:280px;
height:400px;
/*绝对定位 */
position:absolute;
left:0px;
top:0px;
}
#box img:nth-child(1){
transform:rotateY(0deg) translateZ(650px);
}
#box img:nth-child(2){
transform:rotateY(36deg) translateZ(650px);
}
#box img:nth-child(3){
transform:rotateY(72deg) translateZ(650px);
}
#box img:nth-child(4){
transform:rotateY(108deg) translateZ(650px);
}
#box img:nth-child(5){
transform:rotateY(144deg) translateZ(650px);
}
#box img:nth-child(6){
transform:rotateY(216deg) translateZ(650px);
}
#box img:nth-child(7){
transform:rotateY(288deg) translateZ(650px);
}
#box img:nth-child(8){
transform:rotateY(324deg) translateZ(650px);
}
四、什么是 @keyframes属性
@keyframes go{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
25%{
transform:rotateX(20deg) rotateY(180deg);
}
50%{
transform:rotateX(0deg) rotateY(360deg);
}
75%{
transform:rotateX(0deg) rotateY(540deg);
}
100%{
transform:rotateX(0deg) rotateY(720deg);
}
}
</style>
<body>
五、放置图片的容器
<div id="box">
<img src="images/1.png"alt="">
<img src="images/2.png"alt="">
<img src="images/3.png"alt="">
<img src="images/4.png"alt="">
<img src="images/5.png"alt="">
<img src="images/6.png"alt="">
<img src="images/7.png"alt="">
<img src="images/8.png"alt="">
</div>
</body>
</html>
六、视频演示
演示视频中运用一些特效素材，发送对方的时候可以充充门面，它不香吗？
最后祝天下有情人终成眷属，今生只愿温柔的懂你，细腻的疼你，热烈的爱你。