520 抖音哄女友图片动画+详细讲解

效果的实现其实只依赖CSS3的"3D转换"，“动画"和"过渡”

1. css部分

.container{width:800px;height:600px;margin:200px auto;
}.box{width: 400px;height: 400px;margin: 100px auto;position: relative;transition: all 8s;transform-style: preserve-3d;animation: move 8s infinite linear alternate;
}.box>div{width: 400px;height: 400px;opacity: 0.8;position: absolute;top: 0;left: 0;transition: all 1s;
}.box img{width: 400px;height: 400px;
}.left{transform: rotateY(90deg) translateZ(-200px);}
.right{transform: rotateY(90deg) translateZ(200px);}
.top{transform: rotateX(90deg) translateZ(200px);}
.bottom{transform: rotateX(90deg) translateZ(-200px);}
.font{transform: translateZ(200px);}
.behind{transform: translateZ(-200px);}.box:hover .left{transform: rotateY(90deg) translateZ(-250px);}
.box:hover .right{transform: rotateY(90deg) translateZ(250px);}
.box:hover .top{transform: rotateX(90deg) translateZ(250px);}
.box:hover .bottom{transform: rotateX(90deg) translateZ(-250px);}
.box:hover .behind{transform: translateZ(-250px);}
.box:hover .font{transform: translateZ(250px);}@keyframes move{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(13deg) rotateY(720deg);}
}

2.HTML5

<div class="container"><div class="box"><div class="left"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTY5I_M0jKX2s6MKDofX7GYERG1nI3cswwxK_r5jHL37L1_X2a&usqp=CAU"></div><div class="right"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSzibz8KOuKd3X0DaS826tYqI-xJMS_WR43E9gzWfZO_IAjeKdB&usqp=CAU"></div><div class="top"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQHoF63jZERlPKYv45wS2mkGMTOYUgBW3jWWz_1dpZxzQ3lRxak&usqp=CAU"></div><div class="bottom"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSTa7y2P-jbupq0Xkn6o7KrvrzAzlgVeVEGpkdy9r_dknLV3Iwe&usqp=CAU"></div><div class="font"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTWwJDq4tH57gvsHreN0okHTiYibawAgJEEJuKyx1-Wqzd13wdy&usqp=CAU"></div><div class="behind"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRRa1UpLT43QaMbM0-boABR8VdVI1cffpUf92HUicAqZQV6aO8X&usqp=CAU"></div></div>
</div>

3.效果图

4.css讲解

transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等
1.旋转

1.rotateX(angle):围绕其在一个给定度数X轴旋转元素
2.rotateY(angle):围绕其在一个给定度数Y轴旋转元素
3.rotateZ(angle):围绕其在一个给定度数Z轴旋转元素
4.rotate(angle):在一个给定度数顺时针旋转的元素，允许是负值
5.rotate3d(x,y,z,angle):定义3d旋转
#div{   width:300px;   height:200px;  background-color: yellow; transform: rotateX(180deg);}

2.移动

1.translateX(x):向给定的X轴方向平移
2.translateY(y):向给定的Y轴方向平移
3.translateZ(z):向给定的Z轴方向平移
4，translate(x,y):从当前位置移动
5.translate3d(x,y,z):定义3D转化

3.缩放

1.scaleX(x):定义X轴缩放转换
2.scaleX(y):定义y轴缩放转换
3.scaleX(z):定义z轴缩放转换
4.scale(number,number):(宽，高）当数字大于1时放大，小于1时缩小
5.scale(x,y,z):定义3D缩放转换

4.倾斜

1.skew(angle,angle)
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
2.skewX(x-angle)
3.skewY(y-angle)

5.属性：

transform-style:指定嵌套元素是怎样在三纬空间呈现的。
1.flat:子元素将不保留其3d位置
2.preserve-3d:子元素将保留其3d位置
注意：该属性对元素本身没有影响，受影响的是嵌套在它里面的子元素，假设该元素本身向y轴旋转50deg，若为preserve-3d，则子元素也旋转50deg。这就非常符合我们本例的图片旋转了，因为<img>是嵌套在<div>中的子元素，所以div的transfrom如何，img也得如何。transform-style属性的使用前提是使用了transfrom.

6.过渡：运用于添加某种效果可以从一种样式转化到另一种样式的时候，本例则用到了"鼠标滑过"的效果转换样式

要实现这一点满足的条件：
1.指定要添加的CSS样式
2.指定效果的持续时间(如果没有指定，则没有任何效果。因为默认值为0)

过渡属性：
transition:简写属性，用于在一个属性中设置四个过渡属性
1.transition-property:all(所有属性)|none|property(将需要改的写出，用逗号隔开，例：width,height)规定应用过渡的CSS属性名称。
2.transition-duration:定义过渡效果花费的时间。默认为0。
3.transition-timing-function:line(匀速)|ease(逐渐加快)规定过渡效果的时间曲线。
4.transition-delay:规定过渡效果何时开始。默认是0.

7.动画：@keyframes规则是创建动画

当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少两个Css3的动画属性绑定一个选择器：
1.规定动画名称
2.规定动画时长
你可以指定多个样式，运用from---to,或者利用百分比来规定每个样式的时间
例：@keyframes move//move为该动画名称
{0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

动画属性：
animation:简写属性，除了animation-state
1.animation-name:动画名称
2.animation-duration:动画运行时间
3.animation-timing-function:
4.animation-delay:
5.animation-iteration-count:n|infinite(无限)动画运行次数，默认是1。
6.animation-direction:normal(正常播放)|reverse(反向播放)|alternate(奇数次正向，偶数次反向)|alternate-reverse(奇数次反向，偶数次正向)动画运行方向，结束后再次运行的方向。
7.animation-state:动画运行状态。

520 抖音哄女友图片动画+详细讲解相关推荐

最新手机制作抖音/西瓜沙雕动画教程+素材打包
正文: 最新手机制作抖音/西瓜沙雕动画教程+素材打包,这种沙雕动画想必大家可能多多少少都刷到过. 教程+完整素材: wwwfy.lanzouv.com/i8o1K06mxr0j 图片: 由于素材比较多 ...
抖音中误删视频的详细解决流程
有时候一不小心就将抖音中的视频误删了,你们了解怎么处理吗?下文就为你们带来了抖音中误删视频的详细解决流程. 抖音中误删视频的详细解决流程如果你抖音中的视频误删了,先确认自己的手机有没有开启照片的云备 ...
手把手教你抖音怎么用图片做视频！
抖音是一款短视频APP,在抖音里人们可以上传视频,录制视频,看到别人的视频,抖音目前很受年轻人的欢迎,使用抖音的人高达几个亿:我们在抖音上看到的照片视频,其实大部分是在电脑制作后上传的一般比较常见的是 ...
计算机弹奏新年快乐图片大全,2020新年快乐图文素材：抖音跨年图片文字精选集[多图]...
马上就要迎来2020年了,在抖音上也要祝福大家2020年新年快乐,抖音上面也不可或缺的需要元旦节日气氛的素材,在这么重大有意义的节日里,大家肯定是会发朋友圈来纪念和分享的.今天小编就为大家分享一些20 ...
网友爆料：抖音快手严查图片商标侵权
松松群内有网友爆料:近日抖音快手等正在严查图片商标侵权,凡是推广中带有抖音快手等图片的都面临被告. 网友爆料:抖音快手严查图片商标侵权百度抖音互联网微新闻第1张此外,这哥们还了解到相比其他 ...
抖音SEO优化：最详细抖音视频SEO教程
抖音,是由今日头条孵化的一款音乐创意短视频社交软件,该软件于2016年9月20日上线,是一个面向全年龄的短视频社区平台. 截止2020年12月,抖音日活跃已超过6亿日均搜索次数超过4亿抖音SEO ...
python 抖音评论_新手python抖音无水印解析带详细注释
资源来源网络,如果需要授权,请大家更换源码,模块仅供学习,如需商用请购买正版授权,本栏目不提供技术服务,积分不够请签到,或者会员中心投稿源码注释都很详细,可以看看注释!友情提醒,仅供学习使用,请勿用 ...
抖音html 3d旋转扩大图片数量,抖音短视频，超详细的三合一封面图制作实操方法...
我们平时在抖音看电影的时候,如果你仔细观察,你会发现大部分做电影解说的抖音号,个人主页视频作品的封面都是比较凌乱.不统一.有时候看着很难受,非常影响用户体验,关注你的粉丝想找相关的电影也很困难.比如下 ...
Android直播头像动画,iOS 仿抖音直播头像缩放动画
效果图仿抖音直播头像缩放效果, 简单写了demo, 思路简单, 直接用的递归重复调用, 呈上所有代码. @interface YCXHeaderZoomViewController () @prop ...

520 抖音哄女友图片动画+详细讲解

效果的实现其实只依赖CSS3的"3D转换"，“动画"和"过渡”

1. css部分

4.css讲解

520 抖音哄女友图片动画+详细讲解相关推荐

最新文章

热门文章