css3绘制环形_css画圆，如何用纯css实现一个动态画圆环效

展开全部

给你一62616964757a686964616fe78988e69d8331333365653761个例子：html>

css动画

*, *:before, *:after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

:root, html, body {

font-family: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

background: #222;

color: white;

}

h1 {

text-align: center;

margin: 1rem auto 2rem;

font-weight: normal;

}

p {

margin: 1rem;

}

.row {

width: 80%;

height: 150px;

margin: 2rem auto;

}

.cell {

display: inline-block;

width: 49%;

text-align: center;

}

.circle {

display: inline-block;

width: 100px;

height: 100px;

border-radius: 50%;

background: whiteSmoke;

box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;

}

.square {

display: inline-block;

width: 100px;

height: 100px;

border-radius: 20px;

background: whiteSmoke;

box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;

}

.loader {

background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);

animation: spin 1s infinite linear;

}

.loader:before {

display: block;

content: '';

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 90px;

height: 90px;

background: #222;

border-radius: 50%;

}

.gelatine {

animation: gelatine 0.5s infinite;

}

@keyframes gelatine {

from, to { transform: scale(1, 1); }

25% { transform: scale(0.9, 1.1); }

50% { transform: scale(1.1, 0.9); }

75% { transform: scale(0.95, 1.05); }

}

.spin {

animation: spin 1s infinite linear;

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

.elastic-spin {

animation: elastic-spin 1s infinite ease;

}

@keyframes elastic-spin {

from { transform: rotate(0deg); }

to { transform: rotate(720deg); }

}

.pulse {

animation: pulse 1s infinite ea