zoukankan      html  css  js  c++  java
  • 图片卷边

    鼠标移上去   卷角   

    思路  1 鼠标一上去  左上角出现一个 矩形 矩形先定好位置 

    2 处理一下看上去更像  加动画过渡

    3 处理一下样式 把小矩形 背景色渐变  圆角  完美

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8">
            <title>图片卷边</title>
            <style>
                .img_box {
                    height: 200px;
                     200px;
                    margin: auto;
                    position: relative;
                    border-radius: 15px;
                    margin-top: 200px;
                }
                
                img {
                    height: 200px;
                     200px;
                    border-radius: 15px;
                    vertical-align: baseline;
                }
                
                .img_box:before {
                    content: "";
                     0px;
                    height: 0px;
                    background: #fff;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 0 0 5px 0;
                    background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
                    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
                    transition: all 0.5s;
                }
                
                .img_box:hover:before {
                    content: "";
                     30px;
                    height: 30px;
                }
            </style>
        </head>

        <body>
            <div class="img_box">
                <img src="img/headimg.png" />
            </div>
        </body>

    </html>

  • 相关阅读:
    第21,22章:出现次数超过一半的数字,最短摘要的生成
    String的方法
    最长公共子串
    第29章:字符串编辑距离
    字符串转换为整数
    第11章:最长公共子序列(LCS:Longest Common Subsequence)
    django开发_七牛云CNAME解析
    django开发_七牛云图片管理
    FastDFS分布式文件系统
    requests获取响应时间(elapsed)与超时(timeout)、小数四舍五入
  • 原文地址:https://www.cnblogs.com/peijunma/p/6118284.html
Copyright © 2011-2022 走看看