css-动画-小球围着打球转

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: radial-gradient(white, #0089FF);
  border-radius: 50%;
}

.point {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: blue;
  border-radius: 50%;
}

.container {
  position: relative;
  width: 100px;
  height: 100px;
  animation: rotate 2s linear infinite;
  margin: 50px auto;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="circle"></div>
        <div class="point"></div>
      </div>
</body>
</html>

实现步骤

  1. 使用@keyframes定义一个旋转动画,设置初始角度为0度,每隔一段时间增加一定的角度值,直到达到360度为止。
  2. 在圆的div元素上添加一个点,并设置其样式为圆形,大小和颜色与圆相同。
  3. 将圆的div元素和点所在的div元素都放置在一个容器中,并设置容器的旋转动画为刚才定义的rotate动画。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,744评论 1 13
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • CSS 面试题汇总 1. 介绍下 BFC 及其应用 参考答案:参考答案:所谓 BFC,指的是一个独立的布局环境,...
    5cc9c8608284阅读 745评论 0 1
  • 背景 背景大小控制(注意:大小要写在背景属性后面) background-size:auto;/* 默认值,不改变...
    色即是猫阅读 383评论 0 0
  • 动画: 由许多静止的画面(帧)组成。以一定的速度(如每秒30张)连续播放时,肉眼因视觉残象产生错觉而误以为是活动的...
    siyuetian阅读 683评论 0 0