css实现奥运五环金银铜牌三维效果代码
代码语言：html
所属分类：三维
代码描述：css实现奥运五环金银铜牌三维效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*** debug in progress ***/
:root {
--metal: #ffffff45;
--gold: repeating-conic-gradient(#edc800 0deg, #ffe800 15deg, #f3cf00 30deg, #e3b600 45deg, #edc800 60deg) 10% 10%;
--silver: repeating-conic-gradient(#c3c3c3 0deg, #cccccc 15deg, #c6c6c6 30deg, #d7d7d7 45deg, #c3c3c3 60deg) 10% 10%;
--bronze: repeating-conic-gradient(#d95641 0deg, #b14439 15deg, #b2453a 30deg, #d25645 45deg, #d95641 60deg) 10% 10%;
}
body {
margin: 0;
width: 100vw;
height: 100vh;
}
body * {
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(11deg, #000000 0%, #2c3e50 75%);
perspective: 100vmin;
padding-bottom: 10vh;
}
.rings {
width: 100vmin;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateY(45deg);
animation: spin1 2s ease 0s 1, spin2 5s ease-in-out 2s infinite alternate;
position: absolute;
}
.rings:hover, .rings:hover + .rings, .rings:hover .ring:before {
animation-play-state: paused;
}
.rings + .rings {
filter: drop-shadow(0px 0px 1.5vmin black) brightness(0) blur(1.5vmin) opacity(0.35);
animation: shadow1 2s ease 0s 1, shadow2 5s ease-in-out 2s infinite alternate;
z-index: -1;
}
.ring {
width: 30vmin;
height: 30vmin;
border-radius: 100%;
transform: translate3d(-31vmin, -8vmin, 0);
transform-style: preserve-3d;
position: absolute;
box-shadow: 0 0 0.1vmin 0.15vmin var(--metal), 0 0 0.1vmin 0.15vmin var(--metal) inset;
/***
clip-path for ring from stackoverflow:
https://stackoverflow.com/questions/37000558/clip-path-inset-circle
***/
}
.ring:before, .ring:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: radial-gradient(circle at 20% 15%, #ffffffcc 5%, #ffffff40 7%, transparent 13%), radial-gradient(circle at 80% 85%, #ffffffcc 5%, #ffffff40 7%, transparent 13%);
border-radius: 100%;
animation: shine 5s ease-in-out 2s infinite alternate;
transform: rotate(0deg) translate3d(0, 0, 0.1vmin);
filter: blur(7px);
}
.ring:after {
clip-path: polygon(100% 50%, 100% 100%, 0px 100%, 0px 0px, 100% 0px, 100% 50%, 90% 50%, 89.8012% 46.0173%, 89.2069% 42.0742%, 88.2229% 38.2098%, 86.859% 34.4626%, 85.1289% 30.8698%, 83.0496% 27.4672%, 80.6418% 24.2885%, 77.9295% 21.3653%, 74.9396% 18.7267%, 71.7019% 16.399%, 68.2484% 14.4051%, 64.6136% 12.7651%, 60.8336% 11.495%, 56.9459% 10.6077%, 52.9892% 10.1118%, 49.0028% 10.0124%, 45.0263% 10.3104%, 41.0992% 11.0029%, 37.2605% 12.0829%, 33.5485% 13.5398%, 30% 15.359%, 26.6503% 17.5225%, 23.5326% 20.0088%, 20.6779% 22.7931%, 18.1147% 25.8478%, 15.8684% 29.1426%, 13.9612% 32.6447%, 12.4123% 36.3192%, 11.2369% 40.1297%, 10.4468% 44.0383%, 10.0497% 48.0062%, 10.0497% 51.9938%, 10.4468% 55.9617%, 11.2369% 59.8703%, 12.4123% 63.6808%, 13.9612% 67.3553%, 15.8684% 70.8574%, 18.1147% 74.1522%, 20.6779% 77.2069%, 23.5326% 79.9912%, 26.6503% 82.4775%, 30% 84.641%, 33.5485% 86.4602%, 37.2605% 87.9171%, 41.0992% 88.9971%, 45.0263% 89.6896%, 49.0028% 89.9876%, 52.9892% 89.8882%, 56.9459% 89.3923%, 60.8336% 88.505%, 64.6136% 87.2349%, 68.2484% 85.5949%, 71.7019% 83.601%, 74.9396% 81.2733%, 77.9295% 78.6347%, 80.6418% 75.7115%, 83.0496% 72.5328%, 85.1289% 69.1302%, 86.859% 65.5374%, 88.2229% 61.7902%, 89.2069% 57.9258%, 89.8012% 53.9827%, 90% 50%);
background: var(--metal);
filter: none;
animation: none;
transform: translate3d(0, 0, 0.09vmin);
}
.ring span {
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
transform: translateZ(-1px);
filter: brightness(0.75);
background: var(--metal);
clip-path: polygon(100% 50%, 100% 100%, 0px 100%, 0px 0px, 100% 0px, 100% 50%, 90% 50%, 89.8012% 46.0173%, 89.2069% 42.0742%, 88.2229% 38.2098%, 86.859% 34.4626%, 85.1289% 30.8698%, 83.0496% 27.4672%, 80.6418% 24.2885%, 77.9295% 21.3653%, 74.9396% 18.7267%, 71.7019% 16.399%, 68.2484% 14.4051%, 64.6136% 12.7651%, 60.8336% 11.495%, 56.9459% 10.6077%, 52.9892% 10.1118%, 49.0028% 10.0124%, 45.0263% 10.3104%, 41.0992% 11.0029%, 37.2605% 12.0829%, 33.5485% 13.5398%, 30% 15.359%, 26.6503% 17.5225%, 23.5326% 20.0088%, 20.6779% 22.7931%, 18.1147% 25.8478%, 15.8684% 29.1426%, 13.9612% 32.6447%, 12.4123% 36.3192%, 11.2369% 40.1297%, 10.4468% 44.0383%, 10.0497% 48.0062%, 10.0497% 51.9938%, 10.4468% 55.9617%, 11.2369% 59.8703%, 12.4123% 63.6808%, 13.9612% 67.3553%, 15.8684% 70.8574%, 18.1147% 74.1522%, 20.6779% 77.2069%, 23.5326% 79.9912%, 26.6503% 82.4775%, 30% 84.641%, 33.5485% 86.4602%, 37.2605% 87.9171%, 41.0992% 88.9971%, 45.0263% 89.6896%, 49.0028% 89.9876%, 52.9892% 89.8882%, 56.9459% 89.3923%, 60.8336% 88.505%, 64.6136% 87.2349%, 68.2484% 85.5949%, 71.7019% 83.601%, 74.9396% 81.2733%, 77.9295% 78.6347%, 80.6418% 75.7115%, 83.0496% 72.5328%, 85.1289% 69.1302%, 86.859% 65.5374%, 88.2229% 61.7902%, 89.2069% 57.9258%, 89.8012% 53.9827%, 90% 50%);
}
.ring:nth-child(2) {
transform: translate3d(-15vmin, 8vmin, 0);
}
.ring:nth-child(3) {
transform: translate3d(0, -8vmin, 0);
}
.ring:nth-child(4) {
transform: translate3d(16vmin, 8vmin, 0);
}
.ring:nth-child(5) {
transform: translate3d(31vmin, -8vmin, 0);
}
@keyframes spin1 {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(420deg);
}
}
@keyframes spin2 {
0% {
transform: rotateY(60deg);
}
100% {
transform: rotateY(-60deg);
}
}
@keyframes shadow1 {
0% {
transform: rotateY(0deg) rotateX(30deg) translateZ(-30vmin) translateY(-10vmin);
}
100% {
transform: rotateY(420deg) rotateX(30deg) translateZ(-30vmin) translateY(-10vmin);
}
}
@keyframes shadow2 {
0% {
transform: rotateY(60deg) rotateX(30deg) translateZ(-30vmin) translateY(-10vmin);
}
100% {
transform: rotateY(-60deg) rotateX(30deg) translateZ(-30vmin) translateY(-10vmin);
}
}
@keyframes shine {
0% {
transform: rotate(0deg) translate3d(0, 0, 0.1vmin);
}
100% {
transform: rotate(80deg) translate3d(0, 0, 0.1vmin);
}
}
.ring span:nth-child(1) {
transform: translateZ(-1px);
}
.ring span:nth-child(2) {
transform: translateZ(-2px);
}
.ring span:nth-child(3) {
transform: translateZ(-3px);
}
.ring span:nth-child(4) {
transform: translateZ(-4px);
}
.ring span:nth-child(5) {
transform: translateZ(-5px);
}
.ring span:nth-child(6) {
transform: translateZ(-6px);
}
.ring span:nth-child(7) {
transform: translateZ(-7px);
}
.ring span:nth-child(8) {
transform: translateZ(-8px);
}
.ring span:nth-child(9) {
transform: translateZ(-9px);
}
.ring span:nth-child(10) {
transform: translateZ(-10px);
}
.ring span:nth-child(11) {
transform: translateZ(-11px);
}
.ring span:nth-child(12) {
transform: translateZ(-12px);
}
.ring span:nth-child(13) {
transform: translateZ(-13px);
}
.ring span:nth-child(14) {
transform: translateZ(-14px);
}
.ring span:nth-child(15) {
transform: translateZ(-15px);
}
.ring span:nth-child(16) {
transform: translateZ(-16px);
}
.ring span:nth-child(17) {
transform: translateZ(-17px);
}
.ring span:nth-child(18) {
transform: translateZ(-18px);
}
.ring span:nth-child(19) {
transform: translateZ(-19px);
}
.ring span:nth-child(20) {
transform: translateZ(-20px);
filter: none;
}
input {
display: none;
}
label {
width: 10vmin;
height: 10vmin;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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