css流光效果

时间：2018-06-18 17:10:46 阅读：2243 评论：0 收藏：0 [点我收藏+]

标签：oba style rip tle javascrip TE code container SM

css流光效果1：

<!DOCTYPE html>
<html>
<head>
    <title>ww</title>
</head>
<style type="text/css">
    /*CSS源代码*/
    body{
        background:#CFCFCF;
    }
    .image {
      position: relative;
      overflow:hidden;
      width: 300px;
      height: 450px;
    }
    img {
      width:300px;
      height: 450px;
    }
    .image:before{
        content: ‘‘;
        position: absolute;
        display:block;
        width: 200px;
        height: 450px;
        background:#fff;
        top: 0;
        left: -400px;
        translate: -webkit-transform: skewY(25deg);
        -moz-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
        -o-transform: skewX(-25deg);
        transform: skewX(-25deg);
        background:linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
        -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
        -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
        -o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    }
    .image:hover:before{
      left:400px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
     }
    }
</style>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
    <div class="image">
      <img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" />
      <!-- <em></em> -->
    </div>
</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>

2：

.view-area ul li{
    width: 32.666%;
    float: left;
    margin-left: 1%;
    position: relative;
    overflow: hidden;
}
.view-area ul li img{
    width: 100%;
    height: 100%;
    position: relative;
}
.view-area ul li::before{
    position: absolute;
    top: 0;
    left: -135%;
    z-index: 2;
    display: block;
    content: ‘‘;
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.view-area ul li:hover::before{
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

http://demo.cssmoban.com/cssthemes4/cpts_958_csb/index.html

css流光效果

标签：oba style rip tle javascrip TE code container SM

原文地址：https://www.cnblogs.com/jianxian/p/9195435.html

踩

(1)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行