input切换显示与隐藏，歘~
input切换显示与隐藏，歘~
如果你觉得自己被骗了，或者学习过后觉得动画过于浅显，请再信我一次 ?
来吧，展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{display: none}
label{
display: block;
width: 120px;
height: 40px;
background-image: linear-gradient(red, yellow, blue);
font:18px/40px 方正幼圆;
color:#fff;
text-align:center;
}
label:before{
content:"召唤神龙";
}
input:checked+label:before{
content:"许愿成功";
}
img{opacity:0;transform: scale(0);transition:all 1.6s}
input:checked+label+img{opacity:1;transform:scale(1)}
</style>
</head>
<body>
<input type="checkbox" id="only">
<label for="only"></label>
<img src="https://img-blog.csdnimg.cn/20200831210809470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center" alt="">
</body>
</html>如果博友直接取走了代码，下面的内容可以忽略，以下内容只是代码演示和讲解，没有彩蛋。如果你想要彩蛋，那就点击“ 它 ”。
首先创建一个input , 我们把格式改为 checkbox（复选框）
<input type="checkbox" id="only">因为复选框可以切换选中与不选中，这样我们就拥有了两种状态，我想把一行文字与复选框绑定在一起，于是我创建了label
<label for="only"></label>并利用for id将它们联系在了一起。
这样checkbox的两种状态就可以通过 label中的文字触发了。
为了美观我把input隐藏了，但这不影响input发挥作用。
<img src="https://img-blog.csdnimg.cn/20200831210809470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center" alt="">放一张图片进去，基本骨架就构建完成了，接下来我们去添加CSS样式
input{display: none}
label{
display: block;
width: 120px;
height: 40px;
background-image: linear-gradient(red, yellow, blue);
font:18px/40px 方正幼圆;
color:#fff;
text-align:center;
}这部分代码我就不多做赘述了，可能有同学不明白
background-image: linear-gradient(red, yellow, blue);这一句，这是背景颜色线性渐变。
label:before{
content:“召唤神龙”;
}意思是在label元素内容之前插入新内容：
如果label中我写入了ab，那么结果就是“召唤神龙ab”
content:""，是添加内容的意思。
input:checked+label:before{
content:“许愿成功”;
}这段代码的意思是，当input被触发“选中”状态时，input旁边的第一个label添加文字，
如果之前添加过，这次就变成了修改。
此时就实现了点击切换文字，图片为显示状态，接下来就是关键性的动画，我们会用到两个属性，一个是变换中的缩放属性 transform:scale()；另一个是opacity，意为：透明度。
img{opacity:0;transform: scale(0);transition:all 1.6s}
input:checked+label+img{opacity:1;transform:scale(1)}把这段代码放入style中，就可以实现开头效果了，这是一个十分简单的input单击切换，可扩展性非常强大，祝愿大家的前端学习一路平坦。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
