首页 / CSS / 几个CSS的简单动画
几个CSS的简单动画
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了几个CSS的简单动画，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2294字，纯文字阅读大概需要4分钟。
内容图文
几个CSS的简单动画
transform属性简介
-
translate(X, Y)：2D面上的X方向和Y方向的移动；animation 属性里面，如果设置transform，则原样式中设置的transform可能会失效
比如：
.box { width: 100px; height: 100px; background-color: pink; transform: translate(100px, 100px); animation: move 2s linear infinite; } @keyframes move { 0% {transform: scale(1);} 100% {transform: scale(2);} }.box的“transform”属性就会失效。。。
-
scale(num)：2D面上的缩放，1是原始大小
-
rotate(num)：2D面上的旋转，带上单位deg，如：rotate(30deg)
animation属性简介
- animation-name：@keyframes的名称；keyframes是具体动画样式设置
- animation-duration：动画持续时间，一般为秒，如：animation-duration: 2s
- animation-timing-function：动画的速度曲线，即动画运动速度，一般为linear
- animation-delay：动画延迟时间，一般为秒
- animation-iteration-count：动画播放次数，有1次，2次和infinite，如：animation-iteration-count: infinite
- animation-direction：动画是否轮流反向，即设置是否倒放等效果，一般为alternate
- animation：综合写法，如：animation: name duration timing-function iteration-count direction
栗子一
不断放大的正方形
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
// 设置动画效果，持续两秒，匀速运动，无限次数，不倒放
animation: move 2s linear infinite;
}
@keyframes move {
// 开始大小为原始大小，结束大小为两倍大小
0% {transform: scale(1);}
100% {transform: scale(2);}
}
</style>
<body>
<div class="box"></div>
</body>
栗子二
类似心脏跳动的心形
<style>
.heart {
width: 50rpx;
height: 50rpx;
// 设置动画效果，持续一秒，匀速运动，无限次数，不倒放
animation: beat 1s linear infinite;
}
@keyframes beat {
// 每个大括号都是一次关键帧，0的时候为原始大小0.8，透明度1，剩下的以此类推
0% {
transform: scale(0.8);
opacity: 1;
}
25% {
transform: scale(1.2);
opacity: 0.8;
}
100% {
transform: scale(0.8);
opacity: 1;
}
}
</style>
<body>
// 插入心脏图片
<image class="heart" src="./love.png"></image>
</body>
栗子三
类似心电图，从左往右逐渐出现
<style>
.pictureBox {
width: 360px;
height: 100px;
// 添加超出隐藏
overflow: hidden;
animation: picStretch 10s linear infinite;
}
// 图片也要设置宽高，不要用百分比，用数字
.pictureBox img {
width: 360px;
height: 100px;
}
@keyframes picStretch {
0% {width: 0;}
20% {width: 72px;}
40% {width: 144px;}
60% {width: 216px;}
80% {width: 288px;}
100% {width: 360px;}
}
</style>
<body>
<div class="pictureBox">
<img src="./images/line.png" alt="">
</div>
</body>
以上
有错望指正…
内容总结
以上是互联网集市为您收集整理的几个CSS的简单动画全部内容，希望文章能够帮你解决几个CSS的简单动画所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】