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

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

原创最新推荐文章于 2023-03-29 11:10:30 发布 · 4.5k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5 #keyframes

CSS 专栏收录该内容

32 篇文章

订阅专栏

本文分享了一个使用纯CSS3实现的轨道旋转动画案例，通过关键帧动画控制元素旋转及阴影变化，展示了如何不借助JavaScript就能创建动态视觉效果。

效果展示：

源码展示：

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