纯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%;
}
相关推荐
彭世瑜4 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4045 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish6 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five7 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序7 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫5417 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普8 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省9 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_9859 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮11 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画