【每日一练】11—复选框效果的实现

每日一练1年前 (2023)发布 admin

2,079 0 6

写在前面

有小伙伴在后台留言说，为啥照着我的代码写的，怎么效果还不一样，其实，就算不完全一模一样，你也不用担心，多看看，检查一下会不会是浏览器的问题，我这边预览采用都是谷歌浏览器，浏览器的版本不同，有时候都会导致效果有些微妙的差异，这个就是做前端辛苦的地方。

以前IE一统天下的时候，我们就想，兼容IE就好了，现在IE退出江湖了，依然还是有这个问题，所以不要着急，多仔细看看。

很多时候，我们在本地都是OK的，到了服务器上还有各种问题呢，怎么办呀，只能想办法解决，编程就是这样，Bug是永远存在的，就是看这个Bug影响大不大了。

如果我们都把所有Bug都解决了，那程序的世界就太安静了。

但是，有些问题，对于我们平时练习时候，影响不大的话，就不要纠结了，在实际项目中，这个就要具体情况具体分析了。

总之，学习HTML&CSS，看起来好像很简单，其实，这个真的没有那么容易。

想要精通CSS就要多练习，学习它的更多甚至全部功能，这样，我们才能做到心中有数，知道什么时候用什么功能，让CSS帮助我们自由的设计出想要的效果。

现在，我们就一起来一下今天的练习：

HTML：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】11—复选框效果的实现</title>
</head>
<body>
<label>
<input type=”checkbox”>
<div class=”icon”>
<div class=”shadow”></div>
<div class=”iconBox”>
<ion-icon name=”power-outline”></ion-icon>
</div>
</div>
</label>
<script type=”module” src=”https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js”></script>
<script nomodule src=”https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js”></script>
</body>
</html>

CSS:

*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #cfd1e1;
overflow: hidden;
}
label
{
position: relative;
width: 120px;
height: 60px;
transition: 0.5s;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
label::before
{
content: ”;
position: absolute;
width: 60%;
height: 4px;
background: #444;
border-radius: 4px;
}
label input
{
position: absolute;
appearance: none;
}
.icon
{
position: absolute;
left: 0;
width: 60px;
height: 100%;
transition: 0.5s;
}
label input:checked ~ .icon
{
left: 60px;
}
.icon::before
{
content: ”;
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff,#fff,#e3e3e3);
z-index: 1;
filter: blur(1px);
}
.icon::after
{
content: ”;
position: absolute;
top: 0;
right: -1px;
width: 10px;
height: 100%;
background: #9d9d9d;
z-index: 1;
filter: blur(1px);
}
.shadow
{
position: absolute;
top: 30px;
left: -12px;
width: 84.85px;
height: 300px;
background: linear-gradient(180deg,rgba(0,0,0,0.1),transparent,transparent);
transform-origin: top;
transform: rotate(315deg);
pointer-events: none;
}
.iconBox
{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#dbdae1,#a3aaba);
box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
15px 15px 15px rgba(0,0,0,0.1),
20px 20px 15px rgba(0,0,0,0.1),
30px 30px 15px rgba(0,0,0,0.1),
inset 1px 1px 2px #fff;
}
ion-icon
{
position: absolute;
color: #555;
font-size: 1.5em;
–ionicon-stroke-width: 50px;
transition: 0.5s;
}
label input:checked ~ .icon ion-icon
{
color: #00ffe2;
filter: drop-shadow(0 0 5px #00ffe2) drop-shadow(0 0 15px #00ffe2);
}