CSS动画及特效_it博客站

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> 
       
          
          
          
          
          
          
          
          
          
        
   </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>

原文地址：https://blog.csdn.net/daimomo000/article/details/73699570?ops_request_misc=&request_id=82e9f7c9543d4e73bf6aefb5fae95707&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-7-73699570-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

HuaShen

CSS动画及特效

目录

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单