首先,作为浅薄的前端开发者,第一次,所作是分享自己的第一个小成果,务必请大家多多包涵。——逆战班第一次分享
此动画的必要知识点
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )
百分比时,移动本身元素的百分值 -
scale : 缩放
transform:scale(num) num是一个比例值,正常比例是1。当为负值则进行翻转
transform:scale(num1 , num2) 两个值 分别对应 width和 height
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d ) -
rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg<