当前位置：首页 > 网站应用 > 正文内容

太极八卦图特效代码

cjw1238个月前 (10-01)网站应用2150

太极八卦.gif

<!DOCTYPE html>
<html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>太极八卦图</title>
 </head>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #333;
  }
  .box {
   width: 800px;
   height: 800px;
   margin: 50px auto;
   display: flex;
   justify-content: center;
   align-items: center;
  }

  .yinyang {
   width: 600px;
   height: 600px;
   background: #fff;
   box-sizing: border-box;
   border-color: #000;
   border-style: solid;
   border-width: 10px 10px 300px 10px;
   border-radius: 100%;
   position: absolute;
   z-index: 10;
   transform: scale(0.65);
   animation: yinyangRotate 10s infinite linear;
  }

  .yinyang::before {
   content: "";
   width: 290px;
   height: 290px;
   background: #fff;
   box-sizing: border-box;
   border-radius: 100%;
   border: 110px solid #000;
   position: absolute;
   left: 0;
   top: 100%;
   transform: translate(0, -50%);
  }

  .yinyang::after {
   content: "";
   width: 290px;
   height: 290px;
   background: #000;
   box-sizing: border-box;
   border-radius: 100%;
   border: 110px solid #fff;
   position: absolute;
   right: 0;
   top: 100%;
   transform: translate(0, -50%);
  }

  @keyframes yinyangRotate {
   from {
    transform: scale(0.65) rotate(0deg);
   }

   to {
    transform: scale(0.65) rotate(360deg);
   }
  }

  .bg-black {
   width: 600px;
   height: 200px;
   background: #000000;
   position: relative;
  }

  .bg-black::before {
   content: "";
   width: 220px;
   border-left: 190px solid transparent;
   border-right: 190px solid transparent;
   border-bottom: 200px solid #000;
   position: absolute;
   left: 0;
   top: -200px;
  }

  .bg-black::after {
   content: "";
   width: 220px;
   border-left: 190px solid transparent;
   border-right: 190px solid transparent;
   border-top: 200px solid #000;
   position: absolute;
   left: 0;
   bottom: -200px;
  }

  .bg-white {
   width: 570px;
   height: 190px;
   background: #fff;
   position: absolute;
  }

  .bg-white::before {
   content: "";
   width: 210px;
   border-left: 180px solid transparent;
   border-right: 180px solid transparent;
   border-bottom: 190px solid #fff;
   position: absolute;
   left: 0;
   top: -190px;
  }

  .bg-white::after {
   content: "";
   width: 210px;
   border-left: 180px solid transparent;
   border-right: 180px solid transparent;
   border-top: 190px solid #fff;
   position: absolute;
   left: 0;
   bottom: -190px;
  }

  .side {
   width: 100px;
   height: 100px;
   position: absolute;
   z-index: 9;
  }

  .side:nth-child(1) {
   transform: rotate(0deg) translateY(-280px);
  }

  .side:nth-child(2) {
   transform: rotate(45deg) translateY(-270px);
  }

  .side:nth-child(3) {
   transform: rotate(90deg) translateY(-280px);
  }

  .side:nth-child(4) {
   transform: rotate(135deg) translateY(-270px);
  }

  .side:nth-child(5) {
   transform: rotate(180deg) translateY(-280px);
  }

  .side:nth-child(6) {
   transform: rotate(225deg) translateY(-270px);
  }

  .side:nth-child(7) {
   transform: rotate(270deg) translateY(-280px);
  }

  .side:nth-child(8) {
   transform: rotate(315deg) translateY(-270px);
  }

  .line {
   box-sizing: border-box;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 10px solid #000;
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
  }

  .line:nth-child(1) {
   width: 50px;
   bottom: 0;
  }

  .line:nth-child(2) {
   width: 70px;
   bottom: 15px;
  }

  .line:nth-child(3) {
   width: 90px;
   bottom: 30px;
  }

  .split-line::before {
   content: "";
   width: 8px;
   height: 12px;
   display: block;
   background: #fff;
   position: absolute;
   left: 50%;
   margin-left: -4px;
   top: -12px;
  }
 </style>
 <body>

  <div class="box">

   <div class="side">
    <div class="line"></div>
    <div class="line split-line"></div>
    <div class="line"></div>
   </div>
   <div class="side">
    <div class="line split-line"></div>
    <div class="line split-line"></div>
    <div class="line split-line"></div>
   </div>
   <div class="side">
    <div class="line split-line"></div>
    <div class="line split-line"></div>
    <div class="line"></div>
   </div>
   <div class="side">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line split-line"></div>
   </div>
   <div class="side">
    <div class="line split-line"></div>
    <div class="line"></div>
    <div class="line split-line"></div>
   </div>
   <div class="side">
    <div class="line"></div>
    <div class="line split-line"></div>
    <div class="line split-line"></div>
   </div>
   <div class="side">
    <div class="line split-line"></div>
    <div class="line"></div>
    <div class="line"></div>
   </div>
   <div class="side">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
   </div>

   <div class="yinyang"></div>

   <div class="bg-black"></div>
   <div class="bg-white"></div>
  </div>

 </body>

</html>


扫描二维码推送至手机访问。

版权声明：本文由追求完美发布，如需转载请注明出处。

本文链接：https://cjw123.com/blog/?id=134

标签: htmlcss
分享给朋友：
返回列表

上一篇：化学元素周期表网页代码

下一篇：定时炸弹，网页特效

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型，可以规定meta标签所在的html页面是否被蜘蛛抓取，下面是这个meta标签的用法，大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

css中鼠标样式大全

<p>请把鼠标移动文字上，看看效果吧</p> <div style="cursor: pointer;">手形</div>  <div style="cursor:&nbs...

js文字定时向上滚动特效代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t...

google谷歌翻译镜像网站

查找外文资料对于外语不好的那必须要借助翻译工具，各家翻译工具各有不同，想要使用google谷歌翻译，奈何无法访问，那么如何在国内使用谷歌翻译？google谷歌翻译镜像网站有哪些？https://translate.yunkuerp.cn/https://translate.renwole.com/h...

神经变形跷板

<html> <head>     <meta charset="utf-8">     <title>神经变形跷板</tit...

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © 2007 追求完美. Rights Reserved.
湘ICP备16005041号-3