使用一個div作出旋轉的八卦圖

時間 2019-11-10

標籤使用一個 div 作出旋轉八卦欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
div{
    width: 0;
    height: 400px;
    border-left: 200px solid #000;
    border-right: 200px solid #fff;
    box-shadow: 0 0 30px rgba(0,0,0,.5);
    border-radius: 400px;
    animation:rotation 2.5s linear infinite;
    -webkit-animation:rotation 2.5s linear infinite;
    -moz-animation:rotation 2.5s linear infinite;
    position: relative;
}
div:before{
    content: "";
    position: absolute;
    height: 200px;
    width:0;
    background:#fff;
    z-index: 1;
    border-radius: 200px;
    border-left: 100px solid #fff;
    border-right: 100px solid #fff;
    left: -100px;
    box-shadow: 0 200px 0 #000;
}
div:after{
    content: "";
    position: absolute;
    height: 60px;
    width:0;
    background:#fff;
    z-index: 1;
    border-radius: 60px;
    border-left: 30px solid;
    border-right: 30px solid;
    top: 80px;
    left: -30px;
    box-shadow: 0 200px 0 #fff;
}
@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(-360deg);}
}
</style>
<body>
    <div></div>
</body>
</html>

1. css實例——「旋轉」太極八卦圖
2. css3實現旋轉的八卦圖動畫
3. CSS 畫一個八卦
4. 無聊八卦圖
5. 用css作一個旋轉的球
6. 用h5中的canvas 繪製八卦圖
7. 八卦
8. div 旋轉
9. CSS3實現旋轉的太極圖（二）：只用1個DIV
10. canvas 繪製八卦圖
更多相關文章...
• SVN 檢出操作 - SVN 教程
• Spring中Bean的作用域 - Spring教程
• RxJava操作符（八）Aggregate
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。