css动画

最新推荐文章于 2024-08-13 10:54:52 发布

@wyh

最新推荐文章于 2024-08-13 10:54:52 发布

阅读量152

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_39060799/article/details/83384019

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

代码

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@wyh

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画

效果图代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt;*{margin: 0;padding: 0;}.box{width: 640px;height: 310px;ma
复制链接

扫一扫