纯html+css实现奥运五环的示例代码


Posted in HTML / CSS onAugust 02, 2021

效果图

纯html+css实现奥运五环的示例代码

代码 - 以蓝色和黄色的环为例

<div class="container">
    <div class="ring blue"></div>
    <div class="ring yellow yellow1"></div>
    <div class="ring yellow yellow2"></div>
</div>
.ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    border-style: solid;
    border-width: 10px;
}

.blue {
    border-color: #0180C3;
    top: 0;
    left: 0;
    z-index: 0;
}

.yellow {
    border-color: #FEB131;
    left: 70px;
    top: 60px;
}

.yellow1 {
    /* 在蓝色的环上面 */
    z-index: 1;
    /* 切割圆 */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}


.yellow2 {
    /* 在蓝色的环下面 */
    z-index: -1;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

环的交错效果解释

以蓝色和黄色的环为例:
蓝色的环为基准,黄色的环切割成两个部分,第一个部分在蓝色的环上面,第二个部分在蓝色的环下面。

纯html+css实现奥运五环的示例代码

画完蓝色和黄色的环以后,就可以继续画黑色的环。这次基准变成了黄色的环,要将黑色的环切割成两个部分。然后分别是绿色和红色的环,一样的原理。

完整代码

https://jsbin.com/duhubis/edit?html,css,output

到此这篇关于纯html+css实现奥运五环的示例代码的文章就介绍到这了,更多相关html+css 实现奥运五环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
django将数组传递给前台模板的方法
2019/08/06 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
Why we need EJB
2016/10/20 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
最新自我评价范文
2013/11/16 职场文书
小学生环保演讲稿
2014/04/25 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
自我推荐信格式模板
2015/03/24 职场文书
毕业典礼致辞
2015/07/29 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
PHP命令行与定时任务
2021/04/01 PHP
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS