• 纯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>
  • 相关阅读:
    Retrofit的使用
    解决Android Studio在Ubuntu上出现“sdk/platform-tools/adb: error=2, No such file or directory”的方法
    safair浏览器页面局部滑动问题
    App网络测试
    App测试理论简介
    JS -- 流程控制语句
    JS -- DOM(文档对象模型)
    JS -- 操作符和数组
    JS -- 基础语法1
    JS -- JavaScript简介
  • 原文地址:https://www.cnblogs.com/beata/p/5717668.html
Copyright © 2020-2023  润新知