css动画

最新推荐文章于 2025-09-04 16:57:43 发布

@wyh

最新推荐文章于 2025-09-04 16:57:43 发布

阅读量192

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css animate

本文链接：https://blog.youkuaiyun.com/weixin_39060799/article/details/83384019

css3 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS创建动态交互式效果的方法，通过两个圆形元素的动画演示了如何运用CSS动画属性实现平滑过渡和响应式设计。读者将学到如何设置动画的关键帧、控制动画速度和方向，以及如何通过:hover伪类增强用户体验。

效果图

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.box{width: 640px;height: 310px;margin:auto;position: relative;margin-top: 5%;}
.a1{position: relative;}
.b1{position: relative;}
.a{width: 310px;height: 310px;background: red;opacity: .5;
border-radius: 50%;position: absolute;left: 0;animation:mymove 2s infinite linear alternate;cursor: pointer;}
.b{width: 310px;height: 310px;background: blue;opacity: .5;
border-radius: 50%;position: absolute;right: 0;animation:mymove1 2s infinite linear alternate;cursor: pointer;}
.a:hover{opacity: 1;}
.b:hover{opacity: 1;}
.left{float: left;}			
.right{float: right;}
	@keyframes mymove
	{
	from {left:0px;}
	to {left:50px;}
	}
			
	@-webkit-keyframes mymove 
	{
	from {left:0px;}
	to {left:50px;}
	}
			
	@keyframes mymove1
	{
	from {right:0px;}
	to {right:50px;}
	}
			
	@-webkit-keyframes mymove1 /*Safari and Chrome*/
	{
	from {right:0px;}
	to {right:50px;}
	}
</style>
</head>
<body>
	<div class="box">
		<div class="left a1">
			<div class="a"></div>
		</div>
		<div class="right b1">
			<div class="b"></div>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>