skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第104个小实例：单选按钮的创意动画

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-01-28 18:41:58 +08:00
parent 635c6867de
commit db82484f73
3 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -107,4 +107,5 @@
100. HTML5+CSS3+JS小实例：黑色的简约下拉菜单
101. HTML5+CSS3小实例：浮雕效果的彩色loading动画
102. HTML5+CSS3+JS小实例：切片式轮播图
103. HTML5+CSS3小实例：纯CSS实现百叶窗图片切换效果
103. HTML5+CSS3小实例：纯CSS实现百叶窗图片切换效果
104. HTML5+CSS3小实例：单选按钮的创意动画

112
css/104.css Normal file
View File

@ -0,0 +1,112 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
min-height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(200deg,#e4efe9,#93a5cf);
}
.container{
width: 500px;
height: 320px;
background-color: #382f45;
border-radius: 20px;
/* 弹性布局 垂直排列 居中 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* 阴影 */
box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
padding: 0 15px;
}
p{
width: 80%;
color: #fff;
font-size: 40px;
letter-spacing: 5px;
}
.input-box{
width: 80%;
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.input-box label{
position: relative;
cursor: pointer;
display: flex;
align-items: center;
font-size: 32px;
color: #fff;
letter-spacing: 5px;
}
.input-box label span{
/* 相对定位 */
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 15px;
/* 设置过渡 */
transition: 0.5s;
}
.input-box label span::before{
content: "";
/* 绝对定位 */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background-color: #fff;
/* 通过阴影的方式绘制上边框 */
box-shadow: 0 -26px 0 #fff;
transition: 0.5s;
}
.input-box label span::after{
content: "";
/* 绝对定位 */
position: absolute;
left: 0;
bottom: 0;
width: 4px;
height: 100%;
background-color: #fff;
/* 通过阴影的方式绘制右边框 */
box-shadow: 26px 0 0 #fff;
transition: 0.5s;
}
/* 选中"必须滴"的图形变化 */
.input-box label input:checked ~ span.yes::before{
background-color: #0f0;
box-shadow: none;
}
.input-box label input:checked ~ span.yes::after{
background-color: #0f0;
box-shadow: none;
height: 55%;
}
.input-box label input:checked ~ span.yes{
transform: rotate(-45deg) translate(2px,-10px);
}
/* 选中"下次一定"的图形变化 */
.input-box label input:checked ~ span.no::before{
background-color: #f00;
box-shadow: none;
transform: rotate(-45deg) translate(7px,-8px);
}
.input-box label input:checked ~ span.no::after{
background-color: #f00;
box-shadow: none;
transform: rotate(-45deg) translate(7px,11px);
}
.input-box input{
display: none;
}

30
html/104.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>单选按钮的创意动画</title>
<link rel="stylesheet" href="../css/104.css">
</head>
<body>
<div class="container">
<p>会给我三连吗？</p>
<div class="input-box">
<label>
<input type="radio" name="yes_no">
<span class="yes"></span>
必须滴
</label>
<label>
<input type="radio" name="yes_no">
<span class="no"></span>
下次一定
</label>
</div>
</div>
</body>
</html>