几个CSS的简单动画

最新推荐文章于 2024-08-24 00:18:19 发布

Hank_Zheng

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量180

点赞数

分类专栏： css 文章标签： css animation

本文链接：https://blog.csdn.net/Hank_Zheng/article/details/116518476

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的transform属性，包括translate、scale和rotate的使用方法，并通过实例展示了如何创建放大、心跳和心电图动画效果。同时，详细解析了animation属性的各项参数，如animation-name、animation-duration等，帮助理解CSS动画的工作原理。

摘要由CSDN通过智能技术生成

几个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>

以上
有错望指正…

Hank_Zheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
几个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 li
复制链接

扫一扫