search

博客列表 >CSS基础知识：实现了太极图文详解

CSS基础知识：实现了太极图文详解

Lucas
Lucas原创
2022年05月10日 10:31:11433浏览

一、CSS实现太极图的写法

1、第一种静态：CSS实现太极图的写法

html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .dayuan{
  8.             position: absolute;
  9.             align-items: center;
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid darkgray;
  13.             border-radius: 50%;
  14.         }
  15.         .heise{
  16.             width: 400px;
  17.             height: 200px;
  18.             background: #000000;
  19.             border-radius: 200px 200px 0 0;
  20.         }
  21.         .yuan-l{
  22.             position: relative;
  23.             top: -100px;
  24.             display: flex;
  25.             align-items: center;
  26.             justify-content: center;
  27.             float: left;
  28.             width: 200px;
  29.             height: 200px;
  30.             background: #000000;
  31.             border-radius: 50%;
  32.             position: relative;
  33.         }
  34.         .yuan-r{
  35.             position: relative;
  36.             top: -100px;
  37.             display: flex;
  38.             align-items: center;
  39.             justify-content: center;
  40.             float: right;
  41.             width: 200px;
  42.             height: 200px;
  43.             background: #ffffff;
  44.             border-radius: 50%;
  45.         }
  46.         .xy-l{
  47.             width: 50px;
  48.             height: 50px;
  49.             background: #fff;
  50.             border-radius: 50%;
  51.         }
  52.         .xy-r{
  53.             width: 50px;
  54.             height: 50px;
  55.             background: #000000;
  56.             border-radius: 50%;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="dayuan">
  62.         <div class="heise"></div>
  63.         <div class="yuan-l">
  64.             <div class="xy-l"></div>
  65.         </div>
  66.         <div class="yuan-r">
  67.             <div class="xy-r"></div>
  68.         </div>
  69.     </div>
  70. </body>
  71. </html>

页面效果图

2、第二种动画方法：CSS实现旋转太极图

index.html 页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .dayuan{
  8.             position: absolute;
  9.             align-items: center;
  10.             width: 400px;
  11.             height: 400px;
  12.             border: 1px solid darkgray;
  13.             border-radius: 50%;
  14.             animation: dayuan 8s linear infinite;/* 加上动画属性 8s是速度8秒 linear是均速 infinite是循环无限的 */
  15.         }
  16.         .heise{
  17.             width: 400px;
  18.             height: 200px;
  19.             background: #000000;
  20.             border-radius: 200px 200px 0 0;
  21.         }
  22.         .yuan-l{
  23.             position: relative;
  24.             top: -100px;
  25.             display: flex;
  26.             align-items: center;
  27.             justify-content: center;
  28.             float: left;
  29.             width: 200px;
  30.             height: 200px;
  31.             background: #000000;
  32.             border-radius: 50%;
  33.             position: relative;
  34.         }
  35.         .yuan-r{
  36.             position: relative;
  37.             top: -100px;
  38.             display: flex;
  39.             align-items: center;
  40.             justify-content: center;
  41.             float: right;
  42.             width: 200px;
  43.             height: 200px;
  44.             background: #ffffff;
  45.             border-radius: 50%;
  46.         }
  47.         .xy-l{
  48.             width: 50px;
  49.             height: 50px;
  50.             background: #fff;
  51.             border-radius: 50%;
  52.         }
  53.         .xy-r{
  54.             width: 50px;
  55.             height: 50px;
  56.             background: #000000;
  57.             border-radius: 50%;
  58.         }
  60.         /* 加上动画属性：在CSS3中，可以利用transform功能来实现太极图像的旋转，rotate是旋转，deg为度的意思，正数为顺时针旋转，负数为逆时针旋转 */
  61.         @keyframes dayuan{
  62.             0%{
  63.                 transform: rotate(0deg);
  64.             }
  65.             100%{
  66.                 transform: rotate(-360deg);
  67.             }
  68.         }
  69.     </style>
  70. </head>
  71. <body>
  72.     <div class="dayuan">
  73.         <div class="heise"></div>
  74.         <div class="yuan-l">
  75.             <div class="xy-l"></div>
  76.         </div>
  77.         <div class="yuan-r">
  78.             <div class="xy-r"></div>
  79.         </div>
  80.     </div>
  81. </body>
  82. </html>

效果图如下

小总结

学习到了css的盒子模型和动画属性，这有好玩的动画，比如css中可以利用transform功能来实现图像的旋转、缩放、倾斜、移动等类型的变形处理。继续学习中，加油~

上一条：0509作业——制作太极图下一条：CSS:表单伪类-复习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多