前言
1、不是真正的五环,因为通过形变得来。
2、不同电脑显示器的像素不同,显现的效果不同。
3、不推荐使用此方法。
4、主要通过旋转加平移的方式实现。文章来源:https://www.toymoban.com/news/detail-696045.html
效果图
文章来源地址https://www.toymoban.com/news/detail-696045.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
.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%;
}
到了这里,关于纯css实现奥运五环、3D平移、旋转、扭曲的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!