“21天好习惯”第一期－21 CSS动画

今天是两个CSS的动画特效（其中运用了伪选择器），还比较好看，值得记录。 

/* 悬停图片遮罩层 */
.b2 {
    position: absolute;
    top: 0px;
    left: 350px;
    width: 394px;
    height: 446px;
    pointer-events:none;
     background: black;
    opacity: 0;
}
.b1:hover +.b2{
    opacity: 0.8;
    transition: 1s;
} 

/* 动画按钮 */
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    height: 0%;
    width: 100%;
    left: 0;
	border-radius: 10px;
    background-color: white;
	opacity: 0.5;
    transition: 0.5s;
    z-index: -1;
}
.btn:hover {
    color: black;
}
.btn:hover::before {
    height: 100%; 
}             
.btn {
    text-decoration: none!important;
    font-size: 14px;
    letter-spacing: 0.5px;
    -webkit-transition: color 2s, background 1s;
    transition: color 2s, background 1s;
    padding: 20px 30px;
    position: relative;
	font-size: 18px;
	line-height: 80px;
    z-index: 28;
}