html5表白页面3d,七夕节表白3d相册制作(html5+css3)

本文介绍了一种利用CSS3制作七夕表白3D相册的方法,通过定位、阴影、3D转换和动画效果,让照片旋转展示。代码中展示了如何设置图片的布局、旋转动画以及整个相册的3D转换,创建出动态的视觉效果。适合前端开发者学习,提升网页交互体验。
摘要由CSDN通过智能技术生成

七夕节表白3d相册制作

涉及知识点

定位

阴影

3d转换

动画

主要思路:

通过定位将所有照片叠在一起,在设置默认的样式以及照片的布局,最后通过设置盒子以及照片的旋转动画来达到效果。

代码如下:

3d相册

/* 使用单位将所有照片叠在一起 */

img{

width: 200px;

position: absolute;

/* 照片加阴影 */

box-shadow: 0 0 8px black;

/* 照片圆角 */

border-radius: 5px;

}

#album{

width: 200px;

height: 267px;

margin: 250px auto;

/* 父元素设置保留3d效果,这样子子元素的3d效果就可以显示出来 */

transform-style: preserve-3d;

/* 调用动画 */

animation: xuanzhuan 20s linear infinite;

}

body{

/* 设置视距,更好的观察3d效果 */

perspective: 800px;

background-image: url(image/bg2.jpg);

overflow: hidden;

}

@keyframes xz{

/* 设置每张照片独自的旋转效果动画 */

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(360deg);

}

}

@keyframes xuanzhuan{

/* 设置整个照片容器的旋转动画 */

from{

transform: rotateY(0deg);

}

to{

transform: rotateY(360deg);

}

}

#album div[class^="box"] {

transform-style: preserve-3d;

}

#album div[class^="box"] img {

animation: xz 20s linear infinite;

}

/* 设置每张图片的默认旋转样式以及布局 */

#album .box1 {

transform: rotateY(0deg) translateZ(200px);

}

#album .box2 {

transform: rotateY(60deg) translateZ(200px);

}

#album .box3 {

transform: rotateY(120deg) translateZ(200px);

}#album .box4 {

transform: rotateY(180deg) translateZ(200px);

}

#album .box5 {

transform: rotateY(240deg) translateZ(200px);

}

#album .box6 {

transform: rotateY(300deg) translateZ(200px);

}

1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg

其中代码还存在一些优化,读者自行优化。

祝读者们早日脱单!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值