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

太极八卦图特效代码

cjw1237个月前 (10-01)网站应用1960

<!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://www.cjw123.com/blog/?id=134

标签: html css

分享给朋友：

返回列表

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

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

网站调整公告

网站开通了也有三年多了，网站也进行了多次的改版，昨天是我生日嫌着没事在家里把网站再进行了一次改版，当大家再次访问网站时，网站已经换上了全新的衣裳，这次的改版也将意味着我自己也会以一个全新的面貌展现，在我过去的一岁里...

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

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

js实现批量生成18位身份证号码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title&g...

彩色流转文字代码

纯CSS实现菜单炫酷点击展开收起效果

通过纯css3实现展开收缩的弹性动画菜单，可以应用于PC端或移动端页面中，非常实用效果也非常的炫酷，喜欢的码友们可以尝试一下，效果如下：完整代码如下：<!doctype html><html><head><meta charset=&qu...

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果，能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转，并且同时绕着一个中心点缠绕旋转。通过巧妙地运用CSS的动画属性和变换属性，你可以实现这个效果。首先，使用CSS创建一个心形图案，可以通过调整元素的宽高、边框、背景色等属性来塑造心形的形状。然后...

追求完美-BLOG

太极八卦图特效代码

相关文章

网站调整公告

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

js实现批量生成18位身份证号码

彩色流转文字代码

纯CSS实现菜单炫酷点击展开收起效果

CSS心形缠绕转动效果

发表评论

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

追求完美-BLOG

太极八卦图特效代码

相关文章

网站调整公告

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

js实现批量生成18位身份证号码

彩色流转文字代码

纯CSS实现菜单炫酷点击展开收起效果

CSS心形缠绕转动效果

发表评论取消回复

发表评论