用动画实现一个钟摆，左右各30度

最新推荐文章于 2024-07-24 21:48:20 发布

永远爱魏佳

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量284

点赞数

文章标签： animation css3 html

本文链接：https://blog.csdn.net/Lsong940/article/details/119103471

版权

用动画实现一个钟摆，左右各30度](这里写自定义目录标题)

用动画实现一个钟摆，左右各30度

代码片.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
		padding: 100px;
	}
	div.animation {
		width: 100px;
		height: 100px;
		float: left;
	}
    div.line {
        width: 2px;
        height: 80px;
        margin-left: 48px;
        background-color: black;
    }
    div.ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: cadetblue;
        margin-left: 40px;
    }
	div.animation {		
		animation: one 4s  linear infinite;
        transform-origin: 50% 0;
	}
    @keyframes one {
		0% {
			transform: rotate(0);	
		}
		25% {
			transform: rotate(30deg);
		}
		50% {
			transform: translate(0);
		}
		75% {
			transform: rotate(-30deg);
		}
        100% {
			transform: translate(0);
		}
	}
    </style>
</head>
<body>
    <div class="animation">
		<div class="line"></div>
        <div class="ball"></div>
	</div>   
</body>
</html>

永远爱魏佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用动画实现一个钟摆，左右各30度

用动画实现一个钟摆，左右各30度](这里写自定义目录标题)用动画实现一个钟摆，左右各30度代码片.<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫