主要知識點

既然標題是CSS動畫之太極圖案，那顯而易見用到的技術是CSS，這篇文章主要講的就是CSS的兩個函數（var 和 calc）和一個變量聲明（--）。markdown

變量的聲明（--）

聲明變量的時候，變量名前面要加兩根連詞線（--）。也就是當一個值（顏色、字體大小、寬、高等）被屢次使用的時候，咱們能夠建立一個變量，若是須要修改樣式，咱們只要改變這個變量就行了。函數

--test:red;   //聲明一個變量test，值爲紅色
複製代碼

var() 函數

var() 函數用於插入自定義的屬性值，若是一個屬性值在多處被使用，該方法就頗有用。此函數就是讀取咱們上面聲明的變量的。oop

color:var(--test);  
複製代碼

calc() 函數

calc() 函數執行用做屬性值的計算,可以使用運算符：+ - * /。佈局

width: calc(100% - 100px);  
複製代碼

效果實現

只使用一個div標籤，實現一個太極圖案效果。字體

準備html，其實就一個div標籤flex

<body>
    <div></div>
</body>
複製代碼

準備css樣式動畫

body樣式，給body一個初始的樣式

*{
    margin: 0;
    padding: 0;
}

body{
    position: relative;
    background: #4d5077;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

div樣式，定義寬高、兩個顏色變量

div{
    width: 30rem;
    height: 30rem;
    --c1:#000;
    --c2:#fff;
    background: linear-gradient(var(--c1) 50%,var(--c2) 50%);
    position: relative;
    border-radius: 50%;
}
複製代碼

利用after和before，覆蓋到div上，能夠顯示出太極圖的兩條魚

div::after,
div::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    border-radius: 50%;
}

div::before{
    left: 0;
    background: radial-gradient(var(--c2) 25%,var(--c1) 25%);
}

div::after{
    right:0;
    background: radial-gradient(var(--c1) 25%,var(--c2) 25%);
}
複製代碼

給太極圖案加上動畫，而且鼠標放上去時，動畫暫停

div{
    須要加上以前的樣式
    animation:_rotate 5s linear infinite;
}

div:hover{
  animation-play-state: paused;
  cursor:pointer;
}

@keyframes _rotate{
  100%{
    transform:rotate(-360deg)
  }
}
複製代碼

點擊查看效果ui

總結

CSS的函數和變量聲明能夠有效的去作自適應佈局，可是須要考慮兼容性，若是你有興趣，你也能夠在此基礎上進行演變，變成更豐富多彩的圖案。