纯CSS3动画实现小球绕轨道旋转效果

最新推荐文章于 2023-03-29 11:10:30 发布

Mr.王征

最新推荐文章于 2023-03-29 11:10:30 发布

阅读量4.4k

点赞数 6

分类专栏： CSS 文章标签： css css3 html5 keyframes

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87894305

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3动画实现轨道旋转效果</title>
<style>
body {
   background-color:blueviolet;
}
.circle1 {
margin-top:100px;
   width:100px;
   height:100px;
   border-radius:100px;
   position:absolute;
   z-index:2;
   left:140px;
   -webkit-animation:myfirst1 5s linear infinite;
}
@-webkit-keyframes myfirst1 {
   0% {
   transform:rotate(0deg);
   box-shadow:0px 0px 10px #fff;
}
50% {
   transform:rotate(180deg);
   box-shadow:0px 0px 45px #fff;
}
100% {
   transform:rotate(360deg);
   box-shadow:0px 0px 10px #fff;
}
}.circle2 {
   width:10px;
   height:10px;
   border:4px solid #ddd;
   border-radius:20px;
   left:45px;
   top:5px;
   position:absolute;
   z-index:2;
   overflow:hidden;
   background-color:#ddd;
   box-shadow:0px 0px 5px #fff;
}
</style>
</head>
<body>
<div class="circle1">
<div class="circle2"></div>
</div>