效果演示：

代码目录：

主要代码实现：

CSS样式：

/*** 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(#d96b41 0deg, #b15a39 15deg, #b25b3a 30deg, #d26645 45deg, #d96b41 60deg) 10% 10%;/*--bronze: repeating-conic-gradient(#d95641 0deg, #b14439 15deg, #b2453a 30deg, #d25645 45deg, #d95641 60deg) 10% 10%;*/--m-gold: #ffcc00;--m-silver: #e9e9e9;--m-bronze: #fb8248/*#ff6f59*/;--ring-clip: 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%);/*** polygon for the ring by @strangerintheq from stackoverflow:     https://stackoverflow.com/questions/37000558/clip-path-inset-circle***/
}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 1.75s ease 0s 1, spin2 4.575s ease-in-out 1.75s 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 1.75s ease 0s 1, shadow2 4.575s ease-in-out 1.75s 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;
}.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: var(--ring-clip);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: var(--ring-clip);
}.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;position: absolute;z-index: 3;bottom: 8vmin;transform: translateX(calc(50vw - 5vmin));border-radius: 100%;filter: contrast(0.75) sepia(0.65) opacity(0.75);cursor: pointer;text-align: center;font-family: Arial, Helvetica, sans-serif;display: flex;justify-content: center;align-items: center;font-size: 1.5vmin;padding-bottom: 2.5vmin;color: #00000060;transition: all 0.5s ease 0s;font-weight: bold;border: 0.75vmin solid #00000020;
}label:before,
label:after {content: "";width: 1.25vmin;height: 1.25vmin;position: absolute;border-radius: 100%;border: 0.25vmin solid #00000050;filter: drop-shadow(1.85vmin 0 0 black) drop-shadow(0.925vmin 0.75vmin 0 black);margin-left: -3.5vmin;margin-top: 5vmin;
}label:after {filter: none;margin-left: 3.5vmin;
}label[for=gold] {background: var(--gold);box-shadow: 0 0.75vmin 0.1vmin 0 #846900;margin-left: -15vmin;
}label[for=silver] {background: var(--silver);box-shadow: 0 0.75vmin 0.1vmin 0 #808080;
}label[for=bronze] {background: var(--bronze);box-shadow: 0 0.75vmin 0.1vmin 0 #6d2821;margin-left: 15vmin;
}input:checked+label,
input+label:hover {filter: none;transition: all 0.5s ease 0s;border-color: #00000040;transform: translateX(calc(50vw - 5vmin)) translateY(1vmin);box-shadow: 0 0 0.15vmin 0.15vmin #000, -0.5vmin -0.5vmin 1vmin 0vmin #ffffff20, 0.5vmin 0.5vmin 1vmin 0vmin #000000, 0.5vmin 0.5vmin 1vmin 0vmin #000000;
}input#gold:checked~.container {--metal: var(--gold);
}input#gold:checked+label {box-shadow: 0 0 0.15vmin 0.15vmin #000, -0.5vmin -0.5vmin 1vmin 0vmin #ffffff20, 0.5vmin 0.5vmin 1vmin 0vmin #000000, 0.5vmin 0.5vmin 1vmin 0vmin #000000, -0.5vmin -0.5vmin 3vmin 0vmin var(--m-gold);
}input#silver:checked~.container {--metal: var(--silver);
}input#silver:checked+label {box-shadow: 0 0 0.15vmin 0.15vmin #000, -0.5vmin -0.5vmin 1vmin 0vmin #ffffff20, 0.5vmin 0.5vmin 1vmin 0vmin #000000, 0.5vmin 0.5vmin 1vmin 0vmin #000000, -0.5vmin -0.5vmin 3vmin 0vmin var(--m-silver);
}input#bronze:checked~.container {--metal: var(--bronze);
}input#bronze:checked~.container .ring:before {background: radial-gradient(circle at 20% 15%, #ffb8ae82 5%, #ff7b7b40 7%, transparent 13%), radial-gradient(circle at 80% 85%, #ffb8ae82 5%, #ff7b7b40 7%, transparent 13%);
}input#bronze:checked+label {box-shadow: 0 0 0.15vmin 0.15vmin #000, -0.5vmin -0.5vmin 1vmin 0vmin #ffffff20, 0.5vmin 0.5vmin 1vmin 0vmin #000000, 0.5vmin 0.5vmin 1vmin 0vmin #000000, -0.5vmin -0.5vmin 3vmin 0vmin var(--m-bronze);
}@media only screen and (orientation: portrait) {label {width: 20vmin;height: 20vmin;position: absolute;z-index: 3;bottom: 8vmin;transform: translateX(calc(50vw - 10vmin));font-size: 2.5vmin;padding-bottom: 6vmin;}label:before,label:after {content: "";width: 3vmin;height: 3vmin;position: absolute;border-radius: 100%;border: 0.5vmin solid #00000050;filter: drop-shadow(4vmin 0 0 black) drop-shadow(2vmin 2vmin 0 black);margin-left: -8vmin;margin-top: 12vmin;}label:after {filter: none;margin-left: 8vmin;}input:checked+label,input+label:hover {transform: translateX(calc(50vw - 10vmin)) translateY(1vmin);}label[for=gold] {margin-left: -25vmin;}label[for=bronze] {margin-left: 25vmin;}
}

部分HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Metal Olympic Rings - Pure CSS</title><link rel="stylesheet" href="css/style.css"><script src="js/prefixfree.min.js"></script></head><body><input type="radio" name="metal" id="gold" checked="checked" /><label for="gold">金牌</label><input type="radio" name="metal" id="silver" /><label for="silver">银牌</label><input type="radio" name="metal" id="bronze" /><label for="bronze">铜牌</label><div class="container"><div class="rings"><div class="ring"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="ring"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="ring"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="ring"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="ring"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div><div class="rings"><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div></div></div></body></html>

源码获取

精彩推荐更新中：

HTML5大作业实战100套

打卡 文章 更新  36  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️相关推荐

  1. HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️

    效果演示: 代码目录: 主要代码实现: CSS样式: @property --color-position {syntax: '<length-percentage>';inherits: ...

  2. HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️

    效果演示: 代码目录: 主要代码实现: 部分CSS样式: *, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-bo ...

  3. HTML+CSS+JS实现 ❤️3D建筑结构旋转特效❤️

  4. 使用html+css+js实现3D相册

    使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...

  5. 奥运五环图形 -《跟小海龟学Python》案例代码

    今天分享新书<跟小海龟学Python>的案例代码:奥运五环图形. Python源代码: from turtle import * # 导入海龟绘图库# 定义函数绘制空心圆(圆心坐标.半径. ...

  6. 短视频带货系统，HTML+CSS+JS实现宇宙星球旋转动画特效

    短视频带货系统,HTML+CSS+JS实现宇宙星球旋转动画特效 主要代码实现: css样式: /*** @date 2021/1/20 16:10*//* 取消默认间距 */* {margin: 0; ...

  7. 7.纯 CSS 创作一个 3D 文字跑马灯特效

    7.纯 CSS 创作一个 3D 文字跑马灯特效 原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...

  8. HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

    效果演示: 文末获取源码 代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  9. HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️

    效果演示: three基于canvas制作全屏的3D方块粒子悬停,跟随鼠标移动3D翻转动画特效.支持360度无死角翻转效果. 代码目录: 主要代码实现: html代码 : <!DOCTYPE h ...

最新文章

  1. CV算法复现（分类算法1/6）：LeNet5（1998年 LeCun）
  2. 简说JAVA8引入函数式的问题
  3. 盘点几个开源的高仿项目，B站最像~
  4. SSH框架电子商城-系统技术分析
  5. 最通俗易懂的BiLSTM-CRF模型中的CRF层讲解
  6. python是什么课程-教你python中什么是集合（一）
  7. android如何隐藏imageview,Android编程实现切换imageView的方法分析
  8. php没有输出报错信息的解决
  9. You specified a pre-MSA CPU in your CFLAGS
  10. html iframe 设置半透明_HTML基础教程：框架实例大合集
  11. 全国30m土壤质地数据、土壤类型数据、土壤PH、有机质、土壤理化性质数据获取/土壤侵蚀数据/土地利用数据/NPP数据/径流量数据/太阳辐射数据/降雨量数据
  12. 主流数据库优缺点以及性能分析
  13. 计算机表格计算公式加法,加法公式excel,excel表格如何用公式计算加减乘除混合运算？...
  14. 克利夫顿优势识别器 Clifton Strengths
  15. python连接服务器完整过程
  16. 基于51单片机交通灯控制器(东西通行_南北通行_按键启动)
  17. 如何把网吧计算机放到桌面,网吧电脑怎么切换游戏桌面
  18. 深度学习中 经常提到的 end to end 的理解
  19. A Game of Thrones(21)
  20. 大阳能充电新技术---Powerfoyle

热门文章

  1. RFT属于软件测试管理工具,IBM Rational FunctionalTester RFT 软件功能测试工具_FunctionalTester_领测软件测试网...
  2. 华为鸿蒙os2.0系统何时搭载手机,鸿蒙OS 2.0系统正式发布！余承东：明年华为系手机将会搭载...
  3. 软件工程环形复杂度计算方法有哪些_软件工程复习6165组考题
  4. c语言程序设计平时作业代刷,C语言程序设计——小学生口算刷题系统
  5. c# 低功耗蓝牙_c# - 如何使用C＃手动绑定到WinForm中的蓝牙低能耗设备？ - 堆栈内存溢出...
  6. 计算机基础知识与程序设计二,计算机基础与程序设计.doc
  7. input框传值是怎么才能是整形_做了这些项目，到底多久才能化妆？
  8. mysql架设_主从mysql架设
  9. Win10系统电脑查看无线密码的方法
  10. Win11系统如何调节字体大小