CSS 06 动画
2023-03-07 09:11:04 时间
css3动画 @keyframes关键帧
.rect{
width:100px;
height:100px;
background-color:red;
position:flexde;
animation: mymove 2s infinite;
} @keyframes mymove{ //方法一 首帧和尾帧
from{
top:0;
left:20%;
}
to{
top:0;
left:80%;
}
}
@keyframes mymove{ //方法二 动画的不同阶段
0%{
top:0;
left:20%;
background-color:blue;
}
25%{
top:0;
left:80%;
background-colorr:green;
}
50%{
top:80%;
left:80%;
background-color:black;
}
75%{
top:80%;
left:20%;
background-color:yello;
}
100%{
top:0;
left:20%;
background-color:red;
}
} css3动画animation符合属性 animation-name: 指定使用哪一个动画
animation-duration: 动画运行的时间
animation-timing-function: linear; 匀速
ease ; 两头快,中间慢
ease-in-out、ease-in、ease-out
animation-delay: 延迟
animation-iteration-count: 循环次数;infinite 无限循环
animation-direction: normal 默认;alternate 动画反方向播放
复合写:
animation:mymove 3s 3;
css3动画综合实例 CSS 06 动画插图
CSS 06 动画插图1
Loading动画效果实例(一)
.spinner{
margin:100px auto;
width:50px;
height:60px;
text-align:center;
font-size: 10px;
} .spinner > div{
background-color:#67CF22;
height:100%;
width:6px;
display:inline-block;
animation: mymove 1.2 infinite ease-out
} .spinner >div:nth-child(2){
animation-delay: -1.1s;
} .spinner >div:nth-child(3){
animation-delay: -1.0s;
} .spinner >div:nth-child(4){
animation-delay: -0.9s;
} .spinner >div:nth-child(5){
animation-delay: -0.8s;
}
@keyframes mymove{
0%,40%,100%{
transform:scaleY(0.4);
}
20%{
transform:scaleY(1)
}
} Loading动画效果实例(二) CSS 06 动画插图2
CSS 06 动画插图3
.spinner{
width:60px;
height:60px;
position:relative;
margin:100px auto;
}
.spinner > div{
width:100%;
height:100%;
background-color:#67CF22;
border-radius:50%;
opacity:0.6;
position:absolute;
top:0;
left:0;
animation:mya 2s infinite ease-out;
}
.spinner > div:nth-child(2){
animation-delay:-1s; //尽量用负值,打开的时候不会出现卡顿
}
@keyframes mya{
0%,100%{
transform:scale(0.0);
}
50%{
transform:scale(1.0);
}
}
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的