css3动画
1)transition:要过渡的属性,花费时间,运动曲线,何时开始。(且是一直存在的)
过渡:让你可以观测到状态a到状态b的过程;多组过渡效果,请用逗号隔开。
如果所有过渡效果都是同时发生,那么请使用all;
eg.transition: all 3s;
2)transform: translate(x,y);变形属性(X轴和Y轴方向上的平移)
/*定位盒子的居中方式*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
3)缩放:transform:scale(x,y);
注:括号内的是缩放比例;若是大于1则为放大,小于1则是缩小比例
4)旋转:transform: rotate(100deg);相当于Z轴的旋转
注:旋转属性:旋转的角度:正值:顺时针方式*/
旋转的中心点属性:transform-origin
transform-origin: -50px -50px; /*旋转的中心点在图片左上角偏外一点位置。*/
注意:哪个身上有动画效果,过渡的时间(transition: all 3s;)就加给谁。
5)X轴旋转:transform: rotateX(360deg);单凭这个是没有3d效果的,需要给旋转元素的父
级添加视距(perspective:透视距离)。
eg. div {
width: 300px;
margin: 300px auto;
perspective: 1000px;
/*模拟肉眼距离元素500px~1000px*/
/*近大远小(属性值大小来区分)*/
}
img {
transition: all 2s;
}
div:hover img {
transform: rotateX(360deg);
/*为什么没有3d效果*/
/*必须要给旋转的元素的父元素添加视距*/
}
<div>
<img src="imgs/x.jpg">
</div>
6)Y轴旋转:transform: rotateY(360deg); 和X轴一样需要视距才能看出有3d效果。
默认情况下沿着中间的线为旋转轴,使用transform-origin属性可实现沿左边或右边线为旋转
轴旋转。
eg.transform-origin: right center;
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/10675237.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」