纯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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 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
PHP系统流量分析的程序
2006/10/09 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jQuery技巧总结
2011/01/01 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
移动节点的jquery代码
2014/01/13 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
对Python中range()函数和list的比较
2018/04/19 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
创业计划书六个要素
2013/12/26 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
电影复兴之路观后感
2015/06/02 职场文书
学历证明样本
2015/06/16 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
MySQL插入数据与查询数据
2022/03/25 MySQL