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单击切换，可扩展性非常强大，祝愿大家的前端学习一路平坦。