css3 太极动画,css

css

*,

*:before,

*:after {

box-sizing: border-box;

}

html,

body {

min-height: 100vh;

}

body {

margin: 0;

display: -webkit-box;

display: flex;

-webkit-box-pack: center;

justify-content: center;

-webkit-box-align: center;

align-items: center;

background: #85cdca;

color: #368380;

font-family: 'Helvetica', 'Arial', sans-serif;

}

.wrapper {

width: 60vh;

height: 60vh;

position: relative;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateX(-15deg);

transform: rotateX(-15deg);

}

.wrapper .angle {

position: absolute;

width: 100%;

height: 100%;

}

.wrapper .angle:nth-child(1) {

-webkit-transform: rotateY(-65deg);

transform: rotateY(-65deg);

}

.wrapper .angle:nth-child(2) {

-webkit-transform: rotateY(25deg);

transform: rotateY(25deg);

}

.wrapper .angle:nth-child(2) .spin {

animation-direction: reverse;

}

.wrapper .angle .spin {

width: 100%;

height: 100%;

-webkit-animation: spin 4s linear infinite;

animation: spin 4s linear infinite;

}

.wrapper .side {

width: 100%;

height: 100%;

display: -webkit-box;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

flex-direction: column;

-webkit-box-align: center;

align-items: center;

border-radius: 100%;

overflow: hidden;

}

.wrapper .side:before {

content: '';

display: block;

width: 6vh;

height: 6vh;

position: absolute;

bottom: 12vh;

background: black;

border-radius: 100%;

}

.wrapper .side .mask {

width: 75%;

height: 50%;

position: relative;

overflow: hidden;

}

.wrapper .side .mask:before, .wrapper .side .mask:after {

content: '';

display: block;

border-radius: 100%;

}

.wrapper .side .mask:nth-child(1) {

align-self: flex-end;

border-radius: 50% 0 0 50% / 75% 0% 0 75%;

}

.wrapper .side .mask:nth-child(1):before {

width: 30vh;

height: 30vh;

box-shadow: 0 0 0 60vh black;

border: 12vh solid black;

}

.wrapper .side .mask:nth-child(2) {

align-self: flex-end;

width: 50%;

}

.wrapper .side .mask:nth-child(2):before {

position: absolute;

width: 100%;

height: 100%;

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

transform: translate(-50%, 0);

box-shadow: 0 0 0 60vh black;

}

.wrapper .side-two {

-webkit-transform: scaleY(-1);

transform: scaleY(-1);

}

.wrapper .side-two:before {

background: white;

}

.wrapper .side-two .mask:nth-child(1):before {

box-shadow: 0 0 0 60vh white;

border-color: white;

}

.wrapper .side-two .mask:nth-child(2):before {

box-shadow: 0 0 0 60vh white;

}

@-webkit-keyframes spin {

from {

-webkit-transform: rotate(0);

transform: rotate(0);

}

to {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@keyframes spin {

from {

-webkit-transform: rotate(0);

transform: rotate(0);

}

to {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

.controls {

position: fixed;

bottom: 20px;

width: 100%;

display: -webkit-box;

display: flex;

-webkit-box-pack: center;

justify-content: center;

}

.controls label {

font-size: 12px;

border: 2px solid #368380;

padding: 5px 10px;

border-radius: 10px;

font-weight: 600;

cursor: pointer;

}

#toggleGuides {

visibility: hidden;

}

input#toggleGuides:checked ~ .wrapper .angle:nth-child(1) {

outline: 1px solid rgba(0, 0, 0, 0.4);

}

input#toggleGuides:checked ~ .wrapper .angle:nth-child(2) {

outline: 1px solid rgba(255, 255, 255, 0.4);

}

input#toggleGuides:checked ~ .wrapper .side-one {

border: 1px solid rgba(0, 0, 0, 0.4);

}

input#toggleGuides:checked ~ .wrapper .side-two {

border: 1px solid rgba(255, 255, 255, 0.4);

}