zoukankan      html  css  js  c++  java
  • 【原创】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/

     

     

  • 相关阅读:
    HDU 3709 Balanced Number
    HDU 3652 B-number
    HDU 3555 Bomb
    全局和局部内存管理
    [转]
    [转]
    [转]
    The Stable Marriage Problem
    STL各种容器的使用时机详解
    Qt中图像的显示与基本操作
  • 原文地址:https://www.cnblogs.com/crabzzz/p/2602043.html
Copyright © 2011-2022 走看看