几个CSS的简单动画

2021/5/10 10:27:53

编程Tag： 动画 css animation width transform 简单 Scale 100px

本文主要是介绍几个CSS的简单动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

几个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的简单动画

几个CSS的简单动画

transform属性简介

animation属性简介

栗子一

栗子二

栗子三

相关编程文章