css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果
1 /*对元素进行改变(移动、变形、伸缩、扭曲)*/ 2 .wrapper{ 3 margin:100px 100px auto auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 } 8 .wrapper div{ 9 width:300px; 10 height:200px; 11 background:red; 12 color:blue;/*设置文本颜色 如果有的话*/ 13 text-align:center;/* 设置文本位置 如果子元素有的话 */ 14 line-height:200px;/* 设置行间距 */ 15 border-radius:30px;/* 设置角半径 */ 16 17 /*属性*/ 18 transform-origin:top right;/*设置元素的中心点 top center right left bottom 合理的情况下任意两两组合 例如 top right 表示右上角*/ 19 20 /*函数*/ 21 transform:rotate(20deg);/* 旋转20°,整数表示顺时针,负数表示逆时针 */ 22 transform:skew(15deg,20deg);/*x轴扭曲15°,y轴扭曲20°*/ 23 transform:scale(1.5,0.5);/*根据中心点x方向放大1.5倍 y轴缩小0.5倍*/ 24 transform:translate(-100px,50px);/*沿x轴负方向移动100px,沿y轴正方向移动 25 50px*/ 26 } 27 span{ 28 display:block;/* 转换为块状元素 */ 29 }
通过鼠标的点击、获得焦点,被点击或对元素的任何改变中触发,并平滑的以动画的效果改变css的属性值
对元素用到的四个属性为:
- transition-property:width;//表示对那个属性进行变化
- transition-duration:5s;//表示动画持续的时间
- transition-timing-function:ease;
- transition-delay:0.5s;//表示动画延时时间
例子:
1 .wrapper{ 2 margin:auto; 3 width:300px; 4 height:200px; 5 border:2px dotted blue; 6 7 transition-property:all;/*表示hover事件中的所有属性,改成width的话就只对width有 8 效,而height会瞬间变为50px不具有过度效果*/ 9 transition-duration:5s;/*表示动画的持续时间*/ 10 transition-timing-function:ease-in;/*表示动画的播放方式由快到慢*/ 11 transition-delay:0.15s;/*表示动画的延时时间*/ 12 } 13 .wrapper:hover 14 { 15 width:500px; 16 height:50px; 17 }
Do something useful!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?