CS练习---3D循环电子相册()
要求:
- 用cs动画效果实现3D循环电子相册.
目标效果展示:
代码详解:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>电子相册</title>
<!-- 主要思想:
定义两个容器,一个是展示框,用来展示电子相册的转动效果
一个图片容器,用来旋转固定下来的图片达到相册整体转动的效果;
实现流程:
1.确定布局:div包含div,div包好图片
2.位置调整:确定div的位置
3.固定图片:通过position中的absolute将所有图片定位在一起
4.分开图片:设置视觉距离perspective,定义rotate以及translateZ将图片分开
5.转动容器:将容纳图片的容器设置动画效果
6.进行完善:例如添加图片阴影,设置页面背景等-->
<style type="text/css">
body {
background: url(img/ba.jpg)
/* 设置背景图片,这里可自己换 */
}
.box {
/* 设置图片容器,规定图片展示容器的大小 */
width: 800px;
height: 500px;
margin: 20px auto;
}
/* 前后距离 */
.photo-wrap {
/* 因为是3D动画,所以设置视觉距离,否则只能在平面上旋转 */
perspective: 800px;
width: 800px;
}
.container {
width: 800px;
height: 500px;
margin: 0 auto;
transform-style: preserve-3d;
/* 设置3d动画效果 animation : 动画效果名称 运行时间 动画播放效果 是否一直循环播放 */
animation: round 10s linear infinite;
}
.img {
/* 设置图片展示的大小 */
width: 200px;
height: 200px;
/* 垂直居中 */
line-height: 118px;
/* 水平居中 */
text-align: center;
/* 设置图片的绝对位置,将所有图片展示在一起 */
position: absolute;
top: 160px;
left: 300px;
/* 为了让图片看起来更好看,这里通过添加box-shadow属性添加图片阴影; */
box-shadow: 0 0 20px burlywood inset;
}
.i1 {
/* 定义静止的时候的画面, 将第一张照片围绕rotateY 沿着平面直角坐标y轴旋转0度
定义3D旋转,绕着默认值Z轴旋转 translateZ表示的是距离屏幕的远近,是通过视距perspective和translateZ实现的*/
transform: rotateY(0deg) translateZ(320px);
background: url(img/11.jpg);
background-size: cover;
}
.i2 {
/* 定义的translateZ为相同的320px,为了保持一样的观看效果 */
transform: rotateY(40deg) translateZ(320px);
background: url(img/22.jpg);
background-size: cover;
}
.i3 {
transform: rotateY(80deg) translateZ(320px);
background: url(img/33.jpg);
background-size: cover;
}
.i4 {
transform: rotateY(120deg) translateZ(320px);
background: url(img/44.jpg);
background-size: cover;
}
.i5 {
transform: rotateY(160deg) translateZ(320px);
background: url(img/55.jpg);
background-size: cover;
}
.i6 {
transform: rotateY(200deg) translateZ(320px);
background: url(img/66.jpg);
background-size: cover;
}
.i7 {
transform: rotateY(240deg) translateZ(320px);
background: url(img/77.jpg);
background-size: cover;
}
.i8 {
transform: rotateY(280deg) translateZ(320px);
background: url(img/88.jpg);
background-size: cover;
}
.i9 {
transform: rotateY(320deg) translateZ(320px);
background: url(img/99.jpg);
background-size: cover;
}
/* 这里定义的动画函数是让container(存放照片的容器)动起来,达到循环的效果 */
@keyframes round {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<!-- 背景容器 -->
<div class="photo-wrap">
<!-- 存放相册的容器 -->
<div class="container">
<div class="img i1"></div>
<div class="img i2"></div>
<div class="img i3"></div>
<div class="img i4"></div>
<div class="img i5"></div>
<div class="img i6"></div>
<div class="img i7"></div>
<div class="img i8"></div>
<div class="img i9"></div>
</div>
</div>
</div>
</body>
</html>
一些重点和整体的思路在代码中以备注的形式给出,建议直接复制粘贴,自己跑一遍,理清实现思路。
重点:
- 动画效果:关键字
rotate
和关键字translateZ
- 动画绑定,关键字
animation
和关键字@keyframes
- 整体布局思想。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgiebjj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13