美文网首页
css实现页角翻折动态效果

css实现页角翻折动态效果

作者: d34skip | 来源:发表于2019-01-24 17:11 被阅读0次
    IMG_6646.GIF

    效果如图


    div部分

     <div class="servicesItem"></div>
    

    只需要一个div,通过控制他的before伪类实现效果


    css部分

      .servicesItem{
        position: relative;
        padding: 15px;
        background: #f2f2f2;
        border: 1px solid white;
        -webkit-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
       }
      .servicesItem:before{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 25px 25px 0;
        border-style: solid;
        border-color: white white #cccccc #cccccc;
        background: #cccccc;
        display: block;
        width: 0;
        -webkit-transition: all 1.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
        -webkit-box-shadow:  -2px 2px 3px -1px #b3b3b3;
        -moz-box-shadow:  -2px 2px 3px -1px #b3b3b3;
        -o-box-shadow:  -2px 2px 3px -1px #b3b3b3;
        box-shadow:  -2px 2px 3px -1px #b3b3b3;
      }
      .servicesItem:hover{
        background: white;
        border: 1px solid #b3b3b3;
      }
      .servicesItem:hover::before{
        border-width: 0;
      }
    

    相关文章

      网友评论

          本文标题:css实现页角翻折动态效果

          本文链接:https://www.haomeiwen.com/subject/kplujqtx.html