P84-前端基础动画效果-动画3D复仇者联盟练习

1.概述

这篇文章通过一个3D动画，对前面学习的动画效果做一个总结性的练习。
知识点：

元素设置透明效果

设置3d变形效果

设置动画旋转

2. 3D复仇者联盟

2.1.3D复仇者联盟图片

2.2.3D复仇者联盟代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D复仇者联盟</title><style>html {perspective: 800px}.cube {width: 200px;height: 200px;margin: 100px auto;/* 使用动画效果 */animation: rotate 20s infinite linear;/* 设置3d变形效果 */transform-style: preserve-3d;}.cube>div {width: 200px;height: 200px;/* 为元素设置透明效果 */opacity: 0.7;/* 设置元素绝对定位 */position: absolute;}img {/* 垂直对齐方式 */vertical-align: top;}.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(-90deg) translateZ(100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(-90deg) translateZ(100px);}.box5 {transform: rotateY(180deg) translateZ(100px);}.box6 {transform: rotateY(0deg) translateZ(100px);}@keyframes rotate {form {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}</style>
</head><body><!-- 创建一个外部的容器 --><div class="cube"><!-- 引入图片 --><div class="box1"><img src="./img/14/1.jpg" alt=""></div><div class="box2"><img src="./img/14/2.jpg" alt=""></div><div class="box3"><img src="./img/14/3.jpg" alt=""></div><div class="box4"><img src="./img/14/4.jpg" alt=""></div><div class="box5"><img src="./img/14/5.jpg" alt=""></div><div class="box6"><img src="./img/14/6.jpg" alt=""></div></div>
</body></html>

3.3D复仇者联盟效果

P84-前端基础动画效果-动画3D复仇者联盟练习相关推荐

P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果 1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数: scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scaleZ() Z方向缩放 sca ...
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表 1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表. 2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转.在这个案例中我们通过拆分 ...
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习 1.概述这篇文章通过一个奔跑的少年练习动画效果 2.奔跑的小子 2.1.奔跑的小子图片 2.2.奔跑的小子代码 <!DOCTYPE html> ...
android+酷炫动画效果,Android酷炫动画效果之3D星体旋转效果
在Android中,如果想要实现3D动画效果一般有两种选择:一是使用Open GL ES,二是使用Camera.Open GL ES使用起来太过复杂,一般是用于比较高级的3D特效或游戏,并且这个也不是 ...
css3动画效果和3D模型
今天了解了css3的动画渐变效果,如果我们要对页面中的某个元素的样式进行变化,就不用js或jquery苦苦的写代码了,直接用css3的这个transition这个属性就ok,方便快捷,下面请看demo ...
安卓修改动画效果--动画差值器TimeInterpolator
前一段时间让实现一个类似弹幕的效果,从右到左飘过去,时间八秒,嗯,很好做,一个动画就ok了布局代码: <?xml version="1.0" encoding=" ...
php动画效果,动画效果总结
摘要: 动画效果总结 .main{width:100px;height: 100px;margin: 20px 20px;float:left;} .fadein,.fadeout,.fadetogg ...
js动画效果 - 动画曲线
1 参考常见的动画都是速率相同的平滑效果,而有些动画在变动过程中速率不同,比如有些网站的返回顶部的动画效果会经过慢-快-慢的效果,这就设计到数学模型了,有一片参考文章:http://blog.csd ...
用计算机做动画效果,动画图片多种效果制作步骤
动画图片多种效果制作步骤:文字绕月旋转做法 <一>打开FLASH软件,设置版面及导入背景图片,按图解进行,并在35帧处插入帧 . 当这些操作完后与平时在办公软件打字一样,打一部分就保存,这 ...

P84-前端基础动画效果-动画3D复仇者联盟练习

P84-前端基础动画效果-动画3D复仇者联盟练习

1.概述

2. 3D复仇者联盟

2.1.3D复仇者联盟图片

2.2.3D复仇者联盟代码

3.3D复仇者联盟效果

P84-前端基础动画效果-动画3D复仇者联盟练习相关推荐

最新文章

热门文章