css实现太极图

html 复制代码
<template>
  <div>
    <!-- 太极图 -->
    <div class="all">
      <div class="left box"></div>
      <div class="right box"></div>
      <div class="black">
        <div class="inner_white"></div>
      </div>
      <div class="white">
      <div class="inner_black"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {},
};
</script>
<style lang='less' scoped>
.all{
  border:5px solid black;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin:0 auto;
  margin-top:15%;
  overflow: hidden;
  display: flex;
  position: relative;

  animation: action 5s linear infinite;
  .box{
    width: 50%;
    height: 100%;

  }
  .left{
    background: #fff;
  }
  .right{
    background: #000;
  }
  .black{
    background: #000;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    left:50%;
    margin-left: -75px;
    display: flex;
    align-items: center;
    justify-content: center;
    .inner_white{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;

    }
  }
  .white{
    background: #fff;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    left:50%;
    bottom:0;
    margin-left: -75px;
    display: flex;
    align-items: center;
    justify-content: center;
    .inner_black{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #000;

    }
  }
}

@keyframes action {
  0%{
    transform: rotate(0);
  }
  25%{
    transform: rotate(-90deg);
  }
  50%{

    transform: rotate(-180deg);
  }
  75%{
    transform: rotate(-270deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}
</style>
相关推荐
Cacciatore->5 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~6 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo7 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末26 分钟前
React——基础
前端·react.js·前端框架
每天开心30 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry37 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端