CSS动画及特效

最新推荐文章于 2024-01-15 00:00:00 发布

lucky芬

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量578

点赞数

分类专栏： H5和Css3

H5和Css3 专栏收录该内容

15 篇文章

订阅专栏

1.奥运五环

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"/> 
        <title>The Olympic Flag</title>  
        <style type="text/css" media="screen"> 
        body {
            margin:20px;
            background-color:#efefef;
}
        ul.flag {
            list-style-type:none;
            position: relative;
            margin: 20px auto;
} 
      
        .flag li, .flag li:before, .flag li:after {
            -webkit-border-radius: 6em;
            -moz-border-radius: 6em;
            border-radius: 6em;
            position: absolute;
}
        
        .flag li {
            width: 12em;
            height: 12em;
            left: 0;
            top: 0;
            font-size: 1em;
}  
      
        .flag li:after {
            display: block;
            content: "";
            top: -0.1em;
            left: -0.1em;
            right: -0.1em;
            bottom: -0.1em;
            border: solid 1.4em black;
}
        
        .flag .blue   { z-index: 10; left: 0; top: 0;}
        .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em;}
        .flag .black  { z-index: 21; left: 13.6em; top: 0;}
        .flag .green  { z-index: 20; left: 20.4em; top: 5.7em;}
        .flag .red    { z-index: 10; left: 27.2em; top: 0px;}   
        
        .flag .blue:after   { border-color: blue;}   
        .flag .yellow:after { border-color: yellow;} 
        .flag .black:after  { border-color: black;}
        .flag .green:after  { border-color: green;} 
        .flag .red:after    { border-color: red;}
/* 蓝色压住黄色 */  
        .flag .blue.alt { z-index: 24;}
        .flag .blue.alt, 
        .flag .blue.alt:before, 
        .flag .blue.alt:after {
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
}
/* 黄色压住黑色 */
        .flag .yellow.alt { z-index: 23;}
        .flag .yellow.alt, 
        .flag .yellow.alt:before, 
        .flag .yellow.alt:after {
            border-right-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
}    
/* 绿色压住黑色  */
        .flag .green.alt { z-index: 23;}
        .flag .green.alt,
        .flag .green.alt:before,
        .flag .green.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
}
/* 红色压住绿色  */
        .flag .red.alt { z-index: 23;}
        .flag .red.alt, 
        .flag .red.alt:before,
        .flag .red.alt:after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
}       
</style>   
    </head> 
    <body> 
        <ul class="flag"> 
            <li class="blue"></li> 
            <li class="blue alt"></li> 
            <li class="yellow"></li> 
            <li class="yellow alt"></li> 
            <li class="black"></li> 
            <li class="green"></li> 
            <li class="green alt"></li> 
            <li class="red"></li> 
            <li class="red alt"></li> 
        </ul>  
    </body> 
</html>

2.ios开关按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      position: relative;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    .b {
      display: block;
    }

    .toggle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 40px;
      border-radius: 100px;
      background-color: #ddd;
      margin: -20px -40px;
      overflow: hidden;
      box-shadow: inset 0 0 2px 1px rgba(0,0,0,.05);
    }

    .check {
      position: absolute;
      display: block;
      cursor: pointer;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 6;
    }

      .check:checked ~ .track {
        box-shadow: inset 0 0 0 20px #4bd863;
      }

      .check:checked ~ .switch {
        right: 2px;
        left: 22px;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        transition-property: left, right;
        transition-delay: .05s, 0s;
      }

    .switch {
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      right: 22px;
      background-color: #fff;
      border-radius: 36px;
      z-index: 1;
      transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
      transition-property: left, right;
      transition-delay: 0s, .05s;
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

    .track {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
      border-radius: 40px;
    }
    </style>
</head>
<body>
    <div class="toggle">
    <input type="checkbox" class="check">
    <b class="b switch"></b>
    <b class="b track"></b>
</div>
</body>
</html>