您的位置：首页 > Web前端 > CSS

CSS动画及特效

2017-06-25 10:16 435 查看

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 20
4000
px #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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航