zoukankan      html  css  js  c++  java
  • CSS3鼠标滑过图片效果

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3鼠标滑过图片效果</title>
    
    <!--响应式框架-->
    <!--图标库-->
    <!--主要样式-->
    <style type="text/css">
        .box {
             200px;
            height: 200px;
            background: linear-gradient(#8E2DE2, #4A00E0);
            font-family:'Merriweather Sans', sans-serif;
            border-radius: 7px;
            position: relative;
            overflow: hidden;
        }
        .box:before {
            content:"";
            background: -webkit-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 10px, transparent 10px, transparent 20px, rgba(0, 0, 0, 0.1) 20px, rgba(0, 0, 0, 0.1) 30px, transparent 30px, transparent 40px, rgba(0, 0, 0, 0.1) 40px, rgba(0, 0, 0, 0.1) 50px, transparent 50px, transparent 60px, rgba(0, 0, 0, 0.1) 60px, rgba(0, 0, 0, 0.1) 70px, transparent 70px, transparent 80px, rgba(0, 0, 0, 0.1) 80px, rgba(0, 0, 0, 0.1) 90px, transparent 90px);
             100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            transition: all 0.5s;
        }
        .box:hover:before {
            opacity:1;
        }
        .box:hover img {
            opacity: 0.5;
        }
        .box:hover .box-content {
            opacity: 1;
            transform: translateX(-50%) translateY(-50%) rotate(0deg);
        }
        .box .icon {
            padding: 0;
            margin: 0;
            list-style: none;
            opacity: 0;
            transform: rotateX(180deg);
            position: absolute;
            right: 10px;
            top: 10px;
            transition: all 0.3s;
        }
        .box:hover .icon {
            opacity: 1;
            transform: rotate(0);
        }
        .box .icon li a {
            color: #4A00E0;
            background-color: #fff;
            font-size: 17px;
            text-align: center;
            line-height: 30px;
             30px;
            height: 30px;
            margin: 0 0 7px;
            border-radius: 50%;
            display: block;
            transition: all .5s;
        }
        .box .icon li a:hover {
            color: #8E2DE2;
            box-shadow: 0 0 15px #fff;
        }
    </style>
    
    </head>
    <body>
    
    
    <div class="container">
        <div class="box">
            <img src="" style=" 200px;">
            <ul class="icon">
                <li><a href="#"><i class="fa fa-search"></i></a></li>
            </ul>
        </div>
    </div>
    
    </div>
    </body>
    </html>

  • 相关阅读:
    Filebeat 日志收集器 安装和配置
    纠错式教学法对比鼓励式教学法 -----Lily、贝乐、英孚,乐加乐、剑桥国际、优学汇、北外青少
    硅谷夜谈
    指路Reactive Programming
    Spring WebFlux 要革了谁的命?
    flink部署操作-flink standalone集群安装部署
    Flink的高可用集群环境
    当怪物来敲门 经典台词
    浅析几种线程安全模型
    最详细的排序解析,理解七大排序
  • 原文地址:https://www.cnblogs.com/minghan/p/14345566.html
Copyright © 2011-2022 走看看