如何使用CSS3实现的科技球体旋转动画特效
导读:本文共3100字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;box-sizing: border-box;border-radius: inherit;border: 1px solid;box-shadow: inset 0 0 2em, 0 0 2em;}.side::before {w... ...
目录
(为您整理了一些要点),点击可以直达。- (11):.side::before {
- (16):.side::after {
- (19):-webkit-transform: translat
- (24):.side--back {
- (25):-webkit-transform: translat
- (28):.side--left {
- (29):-webkit-transform: translat
- (32):.side--right {
- (33):-webkit-transform: translat
- (36):.side--top {
- (37):-webkit-transform: translat
- (40):.side--bottom {
- (41):-webkit-transform: translat
- (44):.side--front {
- (45):-webkit-transform: translat
- (48):.side__inner {
- (61):-webkit-transform: translat
- (63):-webkit-transform-style: pr
- (66):.side__inner::before, .side
- (80):.side__inner::before {
- (83):-webkit-transform: translat
- (87):.side__inner::after {
- (90):-webkit-transform: translat
- (95):100% {
- (101):100% {
- (113):-webkit-box-pack: center;
- (114):-ms-flex-pack: center;
- (116):-webkit-box-align: center;
- (117):-ms-flex-align: center;
- (120):</style>
- (121):</head>
- (122):<body>
- (123):<div class="contain
- (124):<div class="cube cu
- (125):<div class="side si
- (126):<div class="side__i
- (127):</div>
- (128):<div class="side si
- (129):<div class="side__i
- (130):</div>
- (131):<div class="side si
- (132):<div class="side__i
- (133):</div>
- (134):<div class="side si
- (135):<div class="side__i
- (136):</div>
- (137):<div class="side si
- (138):<div class="side__i
- (139):</div>
- (140):<div class="side si
- (141):<div class="side__i
- (142):</div>
- (143):</div>
- (144):<div class="cube cu
- (145):<div class="side si
- (146):<div class="side__i
- (147):</div>
- (148):<div class="side si
- (149):<div class="side__i
- (150):</div>
- (151):<div class="side si
- (152):<div class="side__i
- (153):</div>
- (154):<div class="side si
- (155):<div class="side__i
- (156):</div>
- (157):<div class="side si
- (158):<div class="side__i
- (159):</div>
- (160):<div class="side si
- (161):<div class="side__i
- (162):</div>
- (163):</div>
- (164):<div class="cube cu
- (165):<div class="side si
- (166):<div class="side__i
- (167):</div>
- (168):<div class="side si
- (169):<div class="side__i
- (170):</div>
- (171):<div class="side si
- (172):<div class="side__i
- (173):</div>
- (174):<div class="side si
- (175):<div class="side__i
- (176):</div>
- (177):<div class="side si
- (178):<div class="side__i
- (179):</div>
- (180):<div class="side si
- (181):<div class="side__i
- (182):</div>
- (183):</div>
- (184):</div>
- (185):</body>
- (186):</html>
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em, 0 0 2em;
}
.side::before {
width: 2.5em;
height: 2.5em;
color: gold;
}
.side::after {
width: 1.5em;
height: 1.5em;
-webkit-transform: translateZ(-2em);
transform: translateZ(-2em);
box-shadow: inset 0 0 1em, 0 0 1em;
color: teal;
}
.side--back {
-webkit-transform: translateZ(-5em) rotateY(180deg);
transform: translateZ(-5em) rotateY(180deg);
}
.side--left {
-webkit-transform: translateX(-5em) rotateY(-90deg);
transform: translateX(-5em) rotateY(-90deg);
}
.side--right {
-webkit-transform: translateX(5em) rotateY(90deg);
transform: translateX(5em) rotateY(90deg);
}
.side--top {
-webkit-transform: translateY(-5em) rotateX(90deg);
transform: translateY(-5em) rotateX(90deg);
}
.side--bottom {
-webkit-transform: translateY(5em) rotateX(-90deg);
transform: translateY(5em) rotateX(-90deg);
}
.side--front {
-webkit-transform: translateZ(5em);
transform: translateZ(5em);
}
.side__inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 5em;
height: 5em;
margin: auto;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em;
color: orangered;
-webkit-transform: translateZ(2em);
transform: translateZ(2em);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 2em, 0 0 2em;
}
.side__inner::before {
width: 2.5em;
height: 2.5em;
-webkit-transform: translateZ(2em);
transform: translateZ(2em);
color: crimson;
}
.side__inner::after {
width: 1.5em;
height: 1.5em;
-webkit-transform: translateZ(4em);
transform: translateZ(4em);
color: purple;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
HTML, BODY {
height: 100%;
}
BODY {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="cube cube--1">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--2">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--3">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
</div>
</body>
</html>
如何使用CSS3实现的科技球体旋转动画特效的详细内容,希望对您有所帮助,信息来源于网络。