純css實(shí)現(xiàn)一個(gè)八卦動(dòng)畫loading
預(yù)覽地址：純css實(shí)現(xiàn)一個(gè)八卦動(dòng)畫loading
1、首先通過
css3的漸變屬性實(shí)現(xiàn)黑白各占一半的背景色
2窄驹、通過偽元素實(shí)現(xiàn)兩個(gè)黑白色的圓缘揪，并且利用flex彈性盒子來布局，然后通過背景色以及邊框來實(shí)現(xiàn)中間的小圓
3木西、利用css3的transform:scale()做大小的縮放
4跟狱、分別給父盒子以及兩個(gè)圓添加動(dòng)畫，記得讓第二個(gè)圓的執(zhí)行時(shí)間和第一個(gè)錯(cuò)開
HTML代碼
<div class="box"></div>
CSS代碼
body{
background: #333;
}
.box{
width: 150px;
height: 150px;
margin: 100px auto;
border-radius: 50%;
background: linear-gradient(to right,#fff 50%,#000 0);
display: flex;
flex-direction: column;
align-items: center;
animation: box 2s linear infinite;
}
.box:before, .box:after{
content: '';
flex: 1;
width: 50%;
border-radius: 50%;
box-sizing: border-box;
background: #000;
border: 28px solid #fff;
animation: circle 1s ease-in-out infinite alternate;
transform: scale(0.5,0.5);
}
.box:before{
transform-origin: top center;
}
.box:after{
animation-delay: -1s;
transform-origin: bottom center;
border-color: #000;
background: #fff;
}
@keyframes box {
100%{
transform: rotate(360deg);
}
}
@keyframes circle{
100%{
transform: scale(1.5);
}
}
