css3图片滑过发光

最新推荐文章于 2024-04-26 17:50:52 发布

前端独秀

最新推荐文章于 2024-04-26 17:50:52 发布

阅读量875

点赞数

分类专栏：前端文章标签： css3

原文链接：https://www.mk2048.com/blog/blog.php?id=1chikihaa&title=css3%E5%9B%BE%E7%89%87%E6%BB%91%E8%BF%87%E5%8F%91%E5%85%89

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

现在css3渐渐的被项目开发中考虑进来了，各大网站在新做的项目中都纷纷应用了css3的一些差异体验。我前几天逛易迅看到个鼠标滑过的一个过渡效果，虽然这个在很早百度音乐听站上面就已经有了，但是这个我感觉更简洁。

Demo：http://jsbin.com/UKAVEq/3

源码：

里面的渐变可以感觉自己的实际情况去做些调整，渐变体的宽度高度位置都是可以自己去慢慢调整的


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
     
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
                  
a {
                      
    float: left;
    position: relative;
                  
}
a:before {
    background: -moz-linear-gradient(left center , rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(255, 0, 0, 0);
 background: -webkit-linear-gradient(left ,rgba(255,255,255,0) 0,rgba(255,255,255,0.1) 10%,rgba(255,255,255,0.1) 50%);
    content: "";
    height: 516px;/*等于图片的高度*/
    left: -300px;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    width:100px;
}
@-moz-keyframes blinkAnim300 {
0% {left: -300px;}
100% {left:800px;/*比图片的宽度略大*/}
}
@-webkit-keyframes blinkAnim300 {
    0% {left:-300px;}
    100%{left:800px;}
}
a:hover:before {
    animation: 0.4s ease-out 0s normal forwards 1 blinkAnim300;
    -webkit-animation: 0.4s ease-out 0s normal forwards 1 blinkAnim300;
}
                  
</style>
</head>
                  
<body>
    <a><img src="http://www.5wants.cc/WEB/File/U3325P704T93D1661F3923DT20090612155225.jpg" /></a>
</body>
</html>

转载请注明：前端录»css3图片滑过发光

前端独秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3图片滑过发光

现在css3渐渐的被项目开发中考虑进来了，各大网站在新做的项目中都纷纷应用了css3的一些差异体验。我前几天逛易迅看到个鼠标滑过的一个过渡效果，虽然这个在很早百度音乐听站上面就已经有了，但是这个我感觉...
复制链接

扫一扫