目录
一、HTML中的动画
在HTML中也可根据个人要求添加动画,有过渡动画transition和生动的动画效果animation以及线上的动画库
二、过渡动画transition
transition是一种提供了在更改CSS属性时控制动画速度的方法,其可以让属性变化成为一个持续一段时间的过程
为页面创建一个div,为其设置背景颜色等属性
页面预览:
当鼠标悬停时,改变大小,之后在加上过渡动画效果
页面预览:当鼠标放在div上时,div向右移动,宽度改变,颜色改变
属性:
transition-property是规定应用过渡的CSS属性的名称
transition-duration定义过渡效果花费的时间。默认是0秒
transition-timing-function规定过渡效果的时间曲线。默认是ease
linear 是以相同速度开始至结束的过渡效果
ease 是从慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 是以慢速开始的过渡效果
ease-out 是以慢速结束的过渡效果
ease-in-out 是慢速开始和结束的过渡效果
transition-delay规定过渡效果从何时开始,即是延时效果。默认是0
transition是连写格式:
transition:过渡属性 过渡时长 运动速度 延迟时间
transition-property transition-duration transition-timing-function transition-delay
二、transition案例---手风琴效果
页面最终效果:
当鼠标放置在某张图片前时,该张图片放大,其他图片缩小
首先,为页面添置几张图片
清除页面默认内外边距
为整体框架设置宽高边框等基本属性,为图片设置相同的宽高,将图片浮动起来,且使超过边框的图片其他地方隐藏起来
手风琴效果:当鼠标移入ul时,所有图片缩小,当鼠标移入具体某张图片时,该张图片放大
注意:在li上设置过渡动画transition
三、动画animation
设置基本的页面
设置animation动画时,要给需要的动画起一个名称,在里面设置0%到100%的变化
页面预览:
初始页面
动画结束时:
属性:
animation-name 是绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
animation-duration是动画的完成时间,告诉系统动画持续的时长
animation-timing-function是设置动画如何完成一个周期,告诉系统动画执行的速度(与过度动画类型)
linear 是以相同速度开始至结束的过渡效果
ease 是从慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 是以慢速开始的过渡效果
ease-out 是以慢速结束的过渡效果
ease-in-out 是慢速开始和结束的过渡效果
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数,告诉系统动画需要执行几次
n 定义动画播放n次 infinite无限次往返执行
animation-direction 指定是否应给轮流反向播放动画
normal 默认取值 ,执行一次后回到起点继续执行下一次
alternate 往返动画,执行完一次后往回执行下一次
reverse 方向执行
animation-fill-mode 规定当动画不播放时(完成时,延时未开始播放时),应用到的元素样式
none 不做任何改变 forwards 结束时保持动画最后一帧的样式
backwards 等待时显示动画第一帧的样式
both 等待时显示动画第一帧的样式,结束时保持动画最后一帧的样式
animation-play-state 告诉系统当前动画是否需要暂停
页面预览:
四、线上动画库animate.css
在CDN中引入animate的cdn,具体网址:https://www.bootcdn.cn/
在底下有其搜索内容,点击第一个
选择适合自己的版本,点击后缀为.min.css,进行复制
将复制的内容粘贴在代码的head标签内的link标签中
给指定元素加入class"animate__animated <动效名称>
进入线上动画库,选择自己喜欢的动画效果(在侧边栏中),线上动画库地址:https://animate.style
复制去名称
在代码中复制
此时页面就会出现对应的动画效果
五、2D转换模型 transform
transform属性应用从2D或3D转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜
旋转 rotate 即:transform:rotate(45deg); 其中deg是一种单位,表示角度
页面预览:
平移 translate 即:transform:translate(100px,100px)
第一个参数表示的是水平方向的平移,第二个参数是垂直方向的平移
给页面一个父容器,子元素在父容器中平移
给父容器和子元素设置合适的宽高,给子元素设置平移属性
页面预览:在未平移之前
平移之后
缩放scale 即transform:scale(n) 其中也可将n分为两个参数
第一个参数水平方向 第二个参数垂直方向
注意:若参数是1,则代表保持不变;若参数大于1,则表示放大;若参数小于1,则表示缩小
放大:
页面预览:
缩小:
页面预览:
连写格式:
transform:rotate(45deg) translate(100px) scale(0.8)
形变中心点: transform-origin 第一个参数水平方向 第二个参数垂直方向
默认情况下所有元素都是以自己的中心点作为参考来旋转的,但我们可以通过形变中心点来修改他的参考点
是页面子元素旋转
页面预览:
旋转中心为子元素的中心点
改变形变点
页面预览:
旋转的中心参考点变为左下方