• 纯css实现模块阴影变色效果


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    .zhezhao{ display:block; width:227px; height:250px; position:absolute; left:0; top:0; background:#333; opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);  -webkit-transition:all 0.8s ease-in-out 0s;-moz-transition:all 0.8s ease-in-out 0s;-o-transition:all 0.8s ease-in-out 0s;transition:all 0.8s ease-in-out 0s; }
    .bian:hover .zhezhao{display:block; opacity:0.7; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
    .bian:hover .bian_01:hover .zhezhao{ opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
    .bian_01{position:relative;}
    
        </style>
    </head>
    <body>
                <div style="1920px;height:480px;background:#F2F2F3;">
                    <div class="bian" style="950px;height:395px;margin:0 auto;">
                         <img src="https://gdp.alicdn.com/imgextra/i2/144939/TB21INknXXXXXbEXXXXXXXXXXXX_!!144939.png" style="border:0;vertical-align:top;" alt="" />
                        <div class="bian_01" style="margin-right:14px;227px;height:250px;float:left;overflow:hidden;">
                             <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i1/144939/TB2br3OmVXXXXc0XpXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>
                        </div>
                        <div class="bian_01" style="margin-right:14px;227px;height:250px;float:left;overflow:hidden;">
                             <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i4/144939/TB2rz34mVXXXXaJXpXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>
                        </div>
                        <div class="bian_01" style="margin-right:14px;227px;height:250px;float:left;overflow:hidden;">
                             <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i2/144939/TB2LrFxnXXXXXXsXXXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>
                        </div>
                        <div class="bian_01" style="227px;height:250px;float:left;overflow:hidden;">
                             <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i4/144939/TB24.yjspXXXXbTXpXXXXXXXXXX_!!144939.jpg" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>
                        </div>
                    </div>
                </div>
        
    </body>
    </html>
  • 相关阅读:
    Promise对象
    iterator和for of 循环
    vue项目基本流程
    BASH_SOURCE 用法
    Java GC CMS 日志分析
    zookeeper 删除snapshot和transaction log的源码解读
    openresty nginx 安装过程记录
    opentesty--luasocket 安装
    为什么要使用SLF4J而不是Log4J
    要过一遍的博客列表
  • 原文地址:https://www.cnblogs.com/beata/p/5717668.html
Copyright © 2020-2023  润新知