css实现圆球顺时针滚动

最新推荐文章于 2023-02-24 14:06:03 发布

natsuyu

最新推荐文章于 2023-02-24 14:06:03 发布

阅读量2.4k

点赞数

分类专栏：前端！。 HTML CSS

本文链接：https://blog.csdn.net/natsuyu/article/details/46931365

版权

前端！。同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

在懒人之家看到的。。小小实现了一下几乎花掉一下午。。。好醉。。

虽然好像理一理框架，但是电脑上好难说。。。。

</pre><span style="font-size:14px;"><img src="webkit-fake-url://66ebb73d-e0e8-4814-80da-9f7b73c4e57c/image.tiff" alt="" />效果图大概这样。round是细框，test是小球，inner是实心圆。其实动的不是小球，是细框，但是因为小球在细框里所以带着小球一起动。可以get的技能：margin为负值，定位的方法，css animation的用法， 不同浏览器的兼容（-webkit- ...）</span><pre name="code" class="html"><!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<title>round</title>
	<link type='text/css' rel='stylesheet' href='begin.css'>
</head>
<body>
	<div id='wrapper'>
	<div id='round'> 
		<div id='test'></div>
	</div>
	<div id='inner'>
		<p></p>
	</div>
	</div>
</body>
</html>

*
{
	margin:0px;padding:0px;
}
body
{
	background-color: #f6f6f6;
}
#wrapper
{
	position: absolute;
	top:200px; left:500px;
	
}
#inner
{
	width: 80px;height:80px;
	border-radius:40px;
	border-style: none;
	background-color: yellow;
}
#inner p
{
	width:80px;
}
#test
{
	width:10px; height: 10px;
	border-radius: 50%;
	background-color:yellow;
	position:relative;
	left:10px;top:10px;
}
#round
{
	width:100px; height: 100px;
	border-radius: 50%;
	border: 1px solid yellow;
	animation:rond 3s infinite;
	-webkit-animation:rond 3s infinite;
	margin-bottom:-80px;
	position:relative;
	left:-10px;
	top:10px;
}

@keyframes rond
{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-webkit-keyframes rond
{
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

natsuyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现圆球顺时针滚动

在懒人之家看到的。。小小实现了一下几乎花掉一下午。。。好醉。。虽然好像理一理框架，但是电脑上好难说。。。。效果图大概这样。round是细框，test是小球，inner是实心圆。其实动的不是小球，是细框，但是因为小球在细框里所以带着小球一起动。可以get的技能：margin为负值，定位的方法，css animation的用法，不同浏览器的兼容（-webkit- ...） roun
复制链接

扫一扫