CSS如何通过伪类实现动态【动画】效果【伪元素的价值等价于JavaScript来实现】

玩好css的伪类及Css3的动画,要简化很多JavaScript代码,非常省力！

**

比如表单聚焦后显示红色,如果通过JavaScript是可以实现的,但是毕竟麻烦,要操作DOM,但是通过css的伪类一行就搞定

**

input:focus {
	color：red
}

其次，你还可以通过聚焦表单时改变其他的元素，比如：

   .user-box {
        position: relative;
        background: #F7F7F7;
        height: 43px;

        input {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 30px;
            padding: 0 10px;
            font-size: 12px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
        }

        label {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 0 10px;
            color: #000;
            pointer-events: none;
            font-size: 12px;
            transition: all .5s;
        }

        input:focus ~ label, input:valid ~ label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 10px;
            font-size: 10px;
            color: #03e9f4;
        }
    }