网站建设公司提成,网站后台编辑器源码,黄骅市原来叫什么名字,旅游网站建设网站目的一、动画的语法
1.定义动画
keyframes 自定义动画名称 {// 开始from {transform: scale(1);}// 结束to {transform: scale(1.5);}
}// 或者还可以使用百分比定义keyframes 动画名称 {// 开始0% {transform: scale(1);}// 结束100% {transform: scale(1.5);}
}
2.调用
anima…一、动画的语法
1.定义动画
keyframes 自定义动画名称 {// 开始from {transform: scale(1);}// 结束to {transform: scale(1.5);}
}// 或者还可以使用百分比定义keyframes 动画名称 {// 开始0% {transform: scale(1);}// 结束100% {transform: scale(1.5);}
}
2.调用
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 暂停动画 执行完毕时状态
属性写的时候不分先后顺序 属性作用取值 animation-name 动画名称自定义 animation-duration 动画时长单位s(秒 animation-delay 延迟时间单位s(秒 animation-timing-functio 速度曲线 linear 动画从头到尾的速度是相同的 ease 默认动画以低速开始然后加快在结束前变慢 ease-in 动画以低速开始 ease-out 动画以结束开始 ease-in-out 动画以低速开始和结束 animation-iteration-count 重复次数 infinite为无限循环 animation-direction 动画方向 normal 按时间轴顺序 reverse 时间轴反方向运行 alternate 轮流即来回往复进行 alternate-reverse 动画先反运行再正方向运行并持续交替运行 animation-play-state 暂停动画 running 继续 paused 暂停通常配合:hover使用 animation-fill-mode 执行完毕时状态 none 回到动画没开始时的状态 forwards 动画结束后动画停留在最后一帧的状态 backwards 动画回到第一帧的状态 both 根据animation-direction轮流应用forwards和backwards规则 注意与iteration-count不要冲突(动画执行无限次) 3D基础语法可参考我的另一篇博客https://mp.csdn.net/mp_blog/creation/editor/127406706
三、通过动画实现骨架屏效果
以下宽高可以通过组件传值自定义这里给的是固定宽高
script setup langts
defineProps{animation: boolean
}()
/script
templatediv classbigdiv classlittle :class{ active: animation }/div/div
/template
style langscss scoped
.big {position: relative;width: 200px;height: 200px;background-color: #ccc;overflow: hidden;.little {position: absolute;left: -200px;top: 0;width: 200px;height: 50px;background: linear-gradient(to right, plum, yellowgreen, paleturquoise);.active {animation: screen 0.8s infinite;}}
}
// 定义动画
keyframes screen {// 开始from {}// 结束to {transform: translateX(600px);}
}/style
