纯css实现奥运五环、3D平移、旋转、扭曲

文章目录


前言

1、不是真正的五环,因为通过形变得来。
2、不同电脑显示器的像素不同,显现的效果不同。
3、不推荐使用此方法。
4、主要通过旋转加平移的方式实现。


效果图


html

html 复制代码
<div class="olympic_rings">
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
</div>

css

css 复制代码
.olympic_rings {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    justify-content: center;
    transform-style: preserve-3d;
}

.ring {
    width: 100px;
    height: 100px;
    border: 10px solid #3884c2;
    border-radius: 50%;
    margin: 0 5px;
}

.ring:nth-child(2) {
    border-color: #000000;
    transform: translateZ(-1px) rotateX(2deg);
}

.ring:nth-child(3) {
    border-color: #d83a31;
    transform: translateZ(10px) rotateY(-15deg);
}

.ring:nth-child(4) {
    border-color: #f9d549;
    margin-top: -50px;
    transform: rotateX(1deg);
    transform-origin: center 15%;
}

.ring:nth-child(5) {
    border-color: #55ac58;
    margin-top: -50px;
    transform: rotateX(3deg);
    transform-origin: center 15%;
}
相关推荐
Hockor37 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军38 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺40 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1141 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡42 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu43 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端
再见了那维莱特1 小时前
6.29 drilling notes
前端