zoukankan      html  css  js  c++  java
  • 图片闪光效果的两种方法

    目前想到两个方式:

    通过在里层多增加一个i标签模拟实现

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
    .imgbox i {
        position: absolute;
        left: -100%;
        top: 0;
         100%;
        height: 100%;
        transform: skewx(-25deg);
        -o-transform: skewx(-25deg);
        -moz-transform: skewx(-25deg);
        -webkit-transform: skewx(-25deg);
        background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
    }
    
    .imgbox:hover i {
        left: 100%;
        transition: 1s;
        -o-transition: 1s;
        -moz-transition: 1s;
        -webkit-transition: 1s
    }
    
    </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="img.jpg" />
            <i></i>
        </div>
    </body>
    </html>
    复制代码

    二:通过伪类方式模拟,减少i标签。高级浏览器识别

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
    .imgbox:after{
        content: "";
        display:block;
        position: absolute;
        left: -100%;
        top: 0;
         100%;
        height: 100%;
        transform: skewx(-25deg);
        -o-transform: skewx(-25deg);
        -moz-transform: skewx(-25deg);
        -webkit-transform: skewx(-25deg);
        background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
    }
    
    .imgbox:hover:after{
        content: "";
        display:block;
        left: 100%;
        transition: 1s;
        -o-transition: 1s;
        -moz-transition: 1s;
        -webkit-transition: 1s
    }
    
    </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="img.jpg" />
        </div>
    </body>
    </html>

    转自:https://www.cnblogs.com/mmdrs/articles/3708564.html
  • 相关阅读:
    day79——基础知识复习3(django)
    day78——基础知识复习2
    bjday5——组件的嵌套与传值
    drfday2——序列化组件serializer
    drfday5——权限,频率,异常处理
    drfday1——入门规范
    ElasticSearch基本查询使用(2)
    RocketMQ(2) 消息的生产和存储
    ElasticSearch基础介绍(1)
    RocketMQ(3) 根据消息key查询功能的实现: indexFile
  • 原文地址:https://www.cnblogs.com/chm-blogs/p/11271041.html
Copyright © 2011-2022 走看看