css伪类元素 ::before和::after的学习

::before和::after的基础学习 

html中1个div

<body>
    <div id="test"></div>
</body>

css中关于伪类的使用

*{
    padding: 0;
    margin: 0;
}
#test{
    background-image: url("../img/sea.jpg") ;
    background-size:500px  auto;
    background-repeat: no-repeat;
    height: 313px;
     width: 500px;
    margin: 50px auto;
    cursor: pointer; 
    position: relative;
}
#test::before{
    content: '';
    display: none;
    height: 313px;
    width: 500px;
    background-color:rgba(17, 17, 17, 0.6);
    
}
#test:hover::before {
   display: block;

}
#test:hover::after {
    display: block;
    background-color: #fff;
   
 }
#test::after{
    content: 'button';
    position: absolute;
    height: 30px;
    width: 80px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    background-color: rgba(17, 17, 17, 0);
    color: rgb(102, 101, 101);
    border-radius: 10px;
    border: 1px solid rgb(117, 116, 116);
    top: 152px;
    left: 218px;
    display: none; 
    animation:mymove 1s ;
    /* transition: all 1s; */
}
@keyframes mymove
{
from {top:60px;}
to {top: 152px;}
}

 

posted @ 2019-11-12 20:58  lipu1993  阅读(206)  评论(0)  编辑  收藏  举报