zoukankan      html  css  js  c++  java
  • css3 翻起页脚

    html

    <div class="demo2">
        <img src="images/1.jpg">
    </div>

    css

    .demo2{
                width: 300px;
                height: 300px;
                position: relative;
                margin: 100px auto;
    
            }
            .demo2 img{
                width: 100%;
            }
            .demo2::before{
                    position: absolute;
                    content: '';
                    top: 0;
                    right: 0;
                    width: 0;
                    height: 0;
                    border-bottom-left-radius: 4px;
                    border-color: rgba(0,0,0,0.2) #fff;
                    border-width: 0px;
                    border-style: solid;
                    box-shadow: 0px 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);
                    transition: all 0.4s ease-out;
            }
            .demo2:hover::before{
                border-bottom-width: 50px;
                    border-right-width: 50px;
            }

    原理:

    利用border-width实现

    before伪元素宽高为0,利用border宽度border-right和border-bottom实现以及border颜色实现上下分割,hover时利用transtion实现动画变化

       

  • 相关阅读:
    Ext.grid.行相关
    FORM 布局
    rs.open sql,conn,1,1全接触
    arguments.callee
    Ext.window.MessageBox xtype: messagebox ; Ext.Msg Ext.MessageBox
    Ext.grid.column
    sql
    正则
    转JS
    quickFilters
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/10620153.html
Copyright © 2011-2022 走看看