写在前面
有小伙伴在后台留言说,为啥照着我的代码写的,怎么效果还不一样,其实,就算不完全一模一样,你也不用担心,多看看,检查一下会不会是浏览器的问题,我这边预览采用都是谷歌浏览器,浏览器的版本不同,有时候都会导致效果有些微妙的差异,这个就是做前端辛苦的地方。
以前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);
}
写在最后
到今天你还在坚持练习的话,我那真的要恭喜你了,你没有放弃,那就继续加油吧,后面我们将一起来写一下静态网页的案例,每天只写其中的某个布局,然后通过每天一点点的积累,一个完整的页面就出来了。
好了,今天的【每日一练】就到这里了,希望今天的练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。