CSS动画及特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:5646

css3特效
{}
1.奥运五环\n \n \n \n \n The Olympic Flag \n \n body {\n margin:20px;\n background-color:#efefef;\n}\n ul.flag {\n list-style-type:none;

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

本文章网址:https://www.sjxi.cn/detil/92310e615f4c44ebb42c549cfecd25e0

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复