纯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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
python解析xml模块封装代码
2014/02/07 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Django框架反向解析操作详解
2019/11/28 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
初一家长会邀请函
2014/01/31 职场文书
岗位工作说明书
2014/07/29 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
教师节领导致辞
2015/07/29 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS