css实现三维尖刺旋转动画效果代码
代码语言：html
所属分类：三维
代码描述：css实现三维尖刺旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
background-color: #111;
color: #fff;
min-height: 100vh;
display: grid;
place-items: center;
perspective: 750px;
}
*:not(:empty) {
transform-style: preserve-3d;
}
.spikes {
position: relative;
-webkit-animation: sphereRotate 30s infinite linear;
animation: sphereRotate 30s infinite linear;
}
@-webkit-keyframes sphereRotate {
from {
transform: rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateZ(360deg);
}
}
@keyframes sphereRotate {
from {
transform: rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateZ(360deg);
}
}
.hemisphere {
position: absolute;
transform: translateY(-130.4px);
}
.hemisphere:nth-child(2) {
transform: rotateZ(180deg) rotateY(36deg) translateY(-130.4px);
}
.pentagon {
position: absolute;
}
.pentagon:nth-child(2) {
transform: rotateY(0turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
}
.pentagon:nth-child(5) {
bottom: 0;
}
.pentagon:nth-child(3) {
transform: rotateY(0.2turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
}
.pentagon:nth-child(6) {
bottom: 0;
}
.pentagon:nth-child(4) {
transform: rotateY(0.4turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
}
.pentagon:nth-child(7) {
bottom: 0;
}
.pentagon:nth-child(5) {
transform: rotateY(0.6turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
}
.pentagon:nth-child(8) {
bottom: 0;
}
.pentagon:nth-child(6) {
transform: rotateY(0.8turn) translateZ(116.8px) rotateY(180deg) translateY(72px) rotateX(63.5deg);
}
.pentagon:nth-child(9) {
bottom: 0;
}
.triangle {
position: absolute;
}
.triangle:nth-child(1) {
transform: rotateY(0deg) rotateX(52.5deg) translateY(46px);
--light: 70%;
}
.triangle:nth-child(2) {
transform: rotateY(72deg) rotateX(52.5deg) translateY(46px);
--light: 76%;
}
.triangle:nth-child(3) {
transform: rotateY(144deg) rotateX(52.5deg) translateY(46px);
--light: 82%;
}
.triangle:nth-child(4) {
transform: rotateY(216deg) rotateX(52.5deg) translateY(46px);
--light: 88%;
}
.triangle:nth-child(5) {
transform: rotateY(288deg) rotateX(52.5deg) translateY(46px);
--light: 94%;
}
.side {
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 16px;
transform-style: preserve-3d;
}
.side:nth-child(1) {
transform: translate(-50%, -50%) rotateZ(0deg) translateY(15.04px);
}
.side:nth-child(2) {
transform: translate(-50%, -50%) rotateZ(120deg) translateY(15.04px);
}
.side:nth-child(3) {
transform: translate(-50%, -50%) rotateZ(240deg) translateY(15.04px);
}
.side::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, var(--light, 100%), 0.75);
background-image: linear-gradient(#0003, #0000);
-webkit-clip-path: polygon(0 100%, 34.7% 0, 65.3% 0, 100% 100%);
clip-path: polygon(0 100%, 34.7% 0, 65.3% 0, 100% 100%);
}
.side::after {
content: "";
position: absolute;
left: 34.7%;
width: 30.6%;
height: 1000%;
background-color: hsl(200, 100%, var(--light, 100%));
transform: rotateX(92.6deg);
transform-origin: top;
background-image: linear-gradient(120deg, #0007, #0000);
-webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
</style>
</head>
<body>
<div class="spikes">
<div class="hemisphere">
<div class="pentagon">
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
<div class="pentagon">
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
<div class="pentagon">
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
<div class="pentagon">
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
<div class="pentagon">
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
<div class="triangle">
<div class="side"></div>
<div class="side"></div>
<div class="side"><.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0