许可优化
软件
产品
要求：
- 用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>html
一些重点和整体的思路在代码中以备注的形式给出，建议直接复制粘贴，自己跑一遍，理清实现思路。
重点：
rotate和关键字translateZanimation和关键字@keyframes
技术文档
热门文章
155-2731-8020
