几个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>
以上
有错望指正…