CSS弹力球

最新推荐文章于 2024-04-27 21:55:17 发布

VIP文章 zheng开源

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量425

点赞数

文章标签： css3 animation html css

本文链接：https://blog.csdn.net/qq_50349220/article/details/109896004

版权

通过CSS的animation属性可以完成一些简单的小动画，例如上下摆动的弹力球。我们在关键帧设定时不止可以使用from和to两个值，我们可以用20%{}，30%{}等规定动画在20%和30%时所在的位置，同时也可设置animation-timing-functin来设定小球运动的状态来达到切合物理科学的效果。

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div class="contact">
			<div class="ball1"></div>
		</div>
	</body>
</html>

.contact{
	height: 500px;
	width: 200px;
	background

最低0.47元/天解锁文章

zheng开源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS弹力球

通过CSS的animation属性可以完成一些简单的小动画，例如上下摆动的弹力球。我们在关键帧设定时不止可以使用from和to两个值，我们可以用20%{}，30%{}等规定动画在20%和30%时所在的位置，同时也可设置animation-timing-functin来设定小球运动的状态来达到切合物理科学的效果。linear 动画从头到尾的速度是相同的。ease 默认。动画以低速开始，然后加快，在结束前变慢。ease-in 动画以低速开始。ease-out 动画以低速结束。ease-in-out
复制链接

扫一扫

CSS弹力球

“相关推荐”对你有帮助么？