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 ease-in-out alternate;

}

@keyframes pulse {

from { transform: scale(0.8); }

to { transform: scale(1.2); }

}

.flash {

animation: flash 500ms ease infinite alternate;

}

@keyframes flash {

from { opacity: 1; }

to { opacity: 0; }

}

.hithere {

animation: hithere 1s ease infinite;

}

@keyframes hithere {

30% { transform: scale(1.2); }

40%, 60% { transform: rotate(-20deg) scale(1.2); }

50% { transform: rotate(20deg) scale(1.2); }

70% { transform: rotate(0deg) scale(1.2); }

100% { transform: scale(1); }

}

.grow {

animation: grow 2s ease infinite;

}

@keyframes grow {

from { transform: scale(0); }

to { transform: scale(1); }

}

.fade-in {

animation: fade-in 2s linear infinite;

}

@keyframes fade-in {

from { opacity: 0; }

to { opacity: 1; }

}

.fade-out {

animation: fade-out 2s linear infinite;

}

@keyframes fade-out {

from { opacity: 1; }

to { opacity: 0; }

}

.bounce {

animation: bounce 2s ease infinite;

}

@keyframes bounce {

70% { transform:translateY(0%); }

80% { transform:translateY(-15%); }

90% { transform:translateY(0%); }

95% { transform:translateY(-7%); }

97% { transform:translateY(0%); }

99% { transform:translateY(-3%); }

100% { transform:translateY(0); }

}

.bounce2 {

animation: bounce2 2s ease infinite;

}

@keyframes bounce2 {

0%, 20%, 50%, 80%, 100% {transform: translateY(0);}

40% {transform: translateY(-30px);}

60% {transform: translateY(-15px);}

}

.shake {

animation: shake 2s ease infinite;

}

@keyframes shake {

0%, 100% {transform: translateX(0);}

10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}

20%, 40%, 60%, 80% {transform: translateX(10px);}

}

.flip {

backface-visibility: visible !important;

animation: flip 2s ease infinite;

}

@keyframes flip {

0% {

transform: perspective(400px) rotateY(0);

animation-timing-function: ease-out;

}

40% {

transform: perspective(400px) translateZ(150px) rotateY(170deg);

animation-timing-function: ease-out;

}

50% {

transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

animation-timing-function: ease-in;

}

80% {

transform: perspective(400px) rotateY(360deg) scale(.95);

animation-timing-function: ease-in;

}

100% {

transform: perspective(400px) scale(1);

animation-timing-function: ease-in;

}

}

.swing {

transform-origin: top center;

animation: swing 2s ease infinite;

}

@keyframes swing {

20% { transform: rotate(15deg); }

40% { transform: rotate(-10deg); }

60% { transform: rotate(5deg); }

80% { transform: rotate(-5deg); }

100% { transform: rotate(0deg); }

}

.wobble {

animation: wobble 2s ease infinite;

}

@keyframes wobble {

0% { transform: translateX(0%); }

15% { transform: translateX(-25%) rotate(-5deg); }

30% { transform: translateX(20%) rotate(3deg); }

45% { transform: translateX(-15%) rotate(-3deg); }

60% { transform: translateX(10%) rotate(2deg); }

75% { transform: translateX(-5%) rotate(-1deg); }

100% { transform: translateX(0%); }

}

.fade-in-down {

animation: fade-in-down 2s ease infinite;

}

@keyframes fade-in-down {

0% {

opacity: 0;

transform: translateY(-20px);

}

100% {

opacity: 1;

transform: translateY(0);

}

}

.fade-in-left {

animation: fade-in-left 2s ease infinite;

}

@keyframes fade-in-left {

0% {

opacity: 0;

transform: translateX(-20px);

}

100% {

opacity: 1;

transform: translateX(0);

}

}

.fade-out-down {

animation: fade-out-down 2s ease infinite;

}

@keyframes fade-out-down {

0% {

opacity: 1;

transform: translateY(0);

}

100% {

opacity: 0;

transform: translateY(20px);

}

}

.fade-out-right {

animation: fade-out-right 2s ease infinite;

}

@keyframes fade-out-right {

0% {

opacity: 1;

transform: translateX(0);

}

100% {

opacity: 0;

transform: translateX(20px);

}

}

.bounce-in {

animation: bounce-in 2s ease infinite;

}

@keyframes bounce-in {

0% {

opacity: 0;

transform: scale(.3);

}

50% {

opacity: 1;

transform: scale(1.05);

}

70% { transform: scale(.9); }

100% { transform: scale(1); }

}

.bounce-in-right {

animation: bounce-in-right 2s ease infinite;

}

@keyframes bounce-in-right {

0% {

opacity: 0;

transform: translateX(2000px);

}

60% {

opacity: 1;

transform: translateX(-30px);

}

80% { transform: translateX(10px); }

100% { transform: translateX(0); }

}

.bounce-out {

animation: bounce-out 2s ease infinite;

}

@keyframes bounce-out {

0% { transform: scale(1); }

25% { transform: scale(.95); }

50% {

opacity: 1;

transform: scale(1.1);

}

100% {

opacity: 0;

transform: scale(.3);

}

}

.bounce-out-down {

animation: bounce-out-down 2s ease infinite;

}

@keyframes bounce-out-down {

0% { transform: translateY(0); }

20% {

opacity: 1;

transform: translateY(-20px);

}

100% {

opacity: 0;

transform: translateY(20px);

}

}

.rotate-in-down-left {

animation: rotate-in-down-left 2s ease infinite;

}

@keyframes rotate-in-down-left {

0% {

transform-origin: left bottom;

transform: rotate(-90deg);

opacity: 0;

}

100% {

transform-origin: left bottom;

transform: rotate(0);

opacity: 1;

}

}

.rotate-in-up-left {

animation: rotate-in-up-left 2s ease infinite;

}

@keyframes rotate-in-up-left {

0% {

transform-origin: left bottom;

transform: rotate(90deg);

opacity: 0;

}

100% {

transform-origin: left bottom;

transform: rotate(0);

opacity: 1;

}

}

.hinge {

animation: hinge 2s ease infinite;

}

@keyframes hinge {

0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }

20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }

40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }

80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }

100% { transform: translateY(700px); opacity: 0; }

}

.roll-in {

animation: roll-in 2s ease infinite;

}

@keyframes roll-in {

0% {

opacity: 0;

transform: translateX(-100%) rotate(-120deg);

}

100% {

opacity: 1;

transform: translateX(0px) rotate(0deg);

}

}

.roll-out {

animation: roll-out 2s ease infinite;

}

@keyframes roll-out {

0% {

opacity: 1;

transform: translateX(0px) rotate(0deg);

}

100% {

opacity: 0;

transform: translateX(100%) rotate(120deg);

}

}

CSS Animation

loader

gelatine

spin

elastic spin

pulse

flash

hi there!

grow

fade in

fade out

bounce

bounce 2

shake

flip

swing

wobble

fade in down

fade in left

fade out down

fade out right

bounce in

bounce in right

bounce out

bounce out down

rotate in down left

rotate in up left

roll in

roll out

hinge