javascript
css+沿正方形旋转,CSS3+SVG+JS 正方形沿着正方本中轴移动翻转的动画
CSS
語言：
CSSSCSS
確定
* {
margin: 0;
padding: 0;
fill: currentColor;
vector-effect: non-scaling-stroke;
}
html {
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-width: 10em;
height: 100vh;
}
body > svg,
body > input,
body > label {
position: absolute;
}
@media (min-aspect-ratio: 105 / 100) and (min-width: 50em) {
body {
flex-direction: row;
}
body pre {
width: 10em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
line {
stroke: currentColor;
stroke-width: 2px;
marker-end: url(#arrow);
vector-effect: non-scaling-stroke;
}
div {
position: absolute;
transform-style: preserve-3d;
}
pre {
order: 1;
padding: .5em 1em;
background: #111;
color: #ccc;
font: .875em/2 courier;
white-space: pre-wrap;
}
@media (min-width: 15em) {
pre {
font-size: 1em;
}
}
@media (min-width: 20em) {
pre {
font-size: 1.25em;
}
}
@media (min-width: 75em) {
pre {
font-size: 1.5em;
}
}
body > svg {
position: absolute;
}
.hidden {
opacity: .001;
}
.scene {
flex: 1;
order: 2;
perspective: 32em;
perspective-origin: calc(50% - 10em) 50%;
}
.cube {
--inradius: 19%;
top: 50%;
left: 50%;
margin: calc(-1*var(--inradius));
padding: var(--inradius);
}
.cube__face {
box-shadow: inset 0 0 0 1px black;
opacity: .5;
background: whitesmoke;
}
.cube__face:nth-child(1) {
transform: rotateY(0deg) translate(50%) rotateY(90deg);
}
.cube__face:nth-child(2) {
transform: rotateY(90deg) translate(50%) rotateY(90deg);
}
.cube__face:nth-child(3) {
transform: rotateY(180deg) translate(50%) rotateY(90deg);
}
.cube__face:nth-child(4) {
transform: rotateY(270deg) translate(50%) rotateY(90deg);
}
.cube__face:nth-child(5) {
transform: rotate(90deg) translate(50%) rotateY(90deg);
}
.cube__face:nth-child(6) {
transform: rotate(-90deg) translate(50%) rotateY(90deg);
}
@media (min-aspect-ratio: 1 / 1) and (min-width: 50em) {
.cube {
--inradius: 15%;
}
}
@media (min-aspect-ratio: 13 / 10) and (min-width: 62.5em) {
.cube {
--inradius: 12.5%;
}
}
@media (min-aspect-ratio: 13 / 10) and (min-width: 75em) {
.cube {
--inradius: 10%;
}
}
@media (min-aspect-ratio: 13 / 10) and (min-width: 100em) {
.cube {
--inradius: 8%;
}
}
.square {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.square:not(.cube__face) > svg {
width: 100%;
height: 100%;
}
@media (min-width: 20em) {
.square:not(.cube__face):after {
position: absolute;
right: .25em;
bottom: 50%;
font: italic 2em/1.5 times new roman, serif;
content: 'x';
}
}
.ini {
background: rgba(192, 192, 192, 0.65);
}
.ani {
background: rgba(238, 140, 37, 0.75);
}
.basic {
animation: ani 5s linear infinite;
animation-play-state: paused;
}
@keyframes ani {
0%, 20% {
transform: none;
}
40% {
transform: rotateY(-90deg);
}
60% {
transform: rotateY(-90deg) translate(50%);
}
80%,
100% {
transform: rotateY(-90deg) translate(50%) rotateY(90deg);
}
}
.token--fnc {
color: #8ecfee;
}
.token--uni {
color: #d0a4dc;
}
.token--var {
color: #e8a398;
font-weight: 900;
}
[id='run'] {
position: absolute;
left: -100vw;
}
[id='run']:checked ~ .scene .basic {
animation-play-state: running;
}
[id='run']:checked ~ [for='run'] {
opacity: .001;
}
[for='run'] {
display: flex;
justify-content: center;
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: .999;
transition: opacity .5s;
cursor: pointer;
}
[for='run'] svg {
align-self: center;
width: 8em;
height: 8em;
}
[for='run'] svg:hover use {
stroke-dashoffset: 0;
}
[for='run'] * {
fill: none;
stroke: #4ca454;
}
[for='run'] use {
transition: stroke-dashoffset 1s ease-in-out;
stroke-width: .5em;
}
[for='run'] path {
stroke-width: .25em;
}
總結
以上是生活随笔為你收集整理的css+沿正方形旋转,CSS3+SVG+JS 正方形沿着正方本中轴移动翻转的动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到自己当爸爸了还是个儿子
- 下一篇： 在Python中有效使用JSON的4个技