• css实现自转动的太极


    自己用css实现的自转动的太极,就当留个纪念。

    用css实现太极有很多种实现方法,我这种大概是最简单的了吧,因为div用得太多了,哈哈。

    高级一点的应该是用伪类:before和:after去减少div的用量。

    当然了,我知道是因为我也用伪类来实现过太极,只是说当初写的源码找不到了,找了一下找不到就放弃了。

    就像人生一样,有些东西丢了就再也找不回来了。也或许可以找回来,但是已经没有找回来的必要了。

    源码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>太极</title>
            
            <style type="text/css">
            * {
                border: 0;
                margin: 0;
                padding: 0;
            }
            .taiji {
                width: 400px;
                height: 400px;
                border: 1px solid black;
                border-radius: 50%;
                animation: spin 6s linear infinite;
                position: relative;
                margin: 100px auto;
            }
            .taiji_half {
                width: 200px;
                height: 400px;
                position: absolute;
            }
            .taiji_half_black {
                border-radius: 100% 0 0 100% / 50% 0 0 50%;
                background: black;
            }
            .taiji_half_white {
                border-radius: 0 100% 100% 0 / 0 50% 50% 0;
                background: white;
                left: 200px;
            }
            .taiji_circle_big {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                position: absolute;
                left: 100px;
            }
            .taiji_circle_big_black {
                background: black;
            }
            .taiji_circle_big_white {
                background: white;
                top: 200px;
            }
            .taiji_circle_small {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                position: absolute;
                left: 75px;
                top: 75px;
            }
            .taiji_circle_small_white {
                background: white;
            }
            .taiji_circle_small_black {
                background: black;
            }
            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            </style>
        </head>
        <body>
            <div class="taiji">
                <div class="taiji_half taiji_half_black"></div>
                <div class="taiji_half taiji_half_white"></div>
                <div class="taiji_circle_big taiji_circle_big_black">
                    <div class="taiji_circle_small taiji_circle_small_white"></div>
                </div>
                <div class="taiji_circle_big taiji_circle_big_white">
                    <div class="taiji_circle_small taiji_circle_small_black"></div>
                </div>
            </div>
        </body>
    </html>

    内容很简单,就这些了。

    难点的话应该主要在【居中】和【圆角】上,要弄懂其实也不难。

    今天在整理电脑文件的时候无意中整理出来的,所以想保存一下,只是突然觉得时间真的是令人猝不及防的东西。

    "高中时一个同学沉迷网络,时常半夜翻墙出校上网。一夜他照例翻墙,只是翻到一半就拔足狂奔而归,面色古怪,问之不语。从此认真读书,不再上网,学校盛传他见鬼了。后来他考上了名校,再问此事的时候,他沉默良久之后终于开口,那天父亲来送生活费,舍不得住旅馆,在墙下坐了一夜。"

  • 相关阅读:
    spring是什么?
    检查80端口是否被占用的命令是: netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"
    配置Dubbo 项目遇到的坑---无法读取方案文档 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'
    maven中使用tomcat插件启动,显示build success但无法继续启动的解决方法
    java.io.File类操作
    eclipse将web项目打war包部署到tomcat下
    Mapper.xml中的resultMap
    2.PLSQL编写简单存储过程(传入参数,修改+打印)
    1.PLSQL编写简单存储过程(无参,纯打印)
    select2
  • 原文地址:https://www.cnblogs.com/yanggb/p/10339691.html
Copyright © 2020-2023  润新知