【原创】CSS3 制作奥林匹克五环

其实网上对于制作五环有过例子，但是那些例子写的比较晦涩而且注解不容易看懂，原理跟我的稍微有些差别

我做了简化，代码量偏少。

用了CSS3 的:after伪类

实质上我感觉:after用在这里并不好用

原因有：

1. jquery无法选择这个伪类，比如$(".round:after")没法选择得到东西

2. jquery无法选择的话，对于这个伪类的操作就不容易实现，比如动态调整css等，只能绕弯路（给head append一个<style>）

3. 在chrome开发工具里看不到这个伪类，实质上没有把它当做一个元素处理。

所以:before 和 :after 其实还是尽量少用，只在简单排版里用。

尽管如此，还是跟很多范例一样，用了:after。

五环制作原理如下

1.五个并列的圆，不设置任何index

2.五个圆和别的圆重叠交叉的部分，预留缺口，border-right-color:transparent

3.用:after制作一个新元素填补这个缺口，灵活调整这个缺口的z-index来实现交叠

演示效果如下，也可以猛击这里：http://jsfiddle.net/crabyan/6tg5Z/

这个version是缺口做成另外颜色的，比较容易理解思路：http://jsfiddle.net/crabyan/6tg5Z/41/

转载于:https://www.cnblogs.com/crabzzz/archive/2012/07/21/2602043.html

【原创】CSS3 制作奥林匹克五环相关推荐

PS如何制作奥运五环
在photoshop中制作奥运五环,可以很好的练习图层和选区运算两个知识点.下图为制作效果: 奥运五环,也称为奥林匹克环,从左至右颜色分别为蓝.黄.黑.绿.红五色.五环代表以奥林匹克精神参赛的五大洲, ...
CSS3制作文字半透明倒影效果
CSS3制作文字半透明倒影效果 /*------------------ITEYE 祈祷幸福(http://qidaoxingfu.iteye.com)原创转载请注明---------------- ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...

【原创】CSS3 制作奥林匹克五环

【原创】CSS3 制作奥林匹克五环相关推荐

最新文章

热门文章