CSS3鼠标hover进度条与两端加载动画&光影划入效果_css hover 添加线条动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39015698/article/details/103386948

<!Doctype html>
<html>
<head>
<style>
*{margin:0;padding;0}
.it1{ position:relative;width:200px;height:100px; background:orange; }
.it1:after{position:absolute;bottom:0;left:0;width:0;height:3px;background:red;content:'';transition:all .25s ease-in;}
.it1:hover:after{width:100%}


.it2{ margin-top:20px; position:relative;width:200px;height:100px;background:orange;}
.it2:after{position:absolute;bottom:0;left:50%;width:0;height:3px;background:red;content:'';transition:all .25s}
.it2:hover:after{left:0;width:100%}}
</style>
</head>
<body>
<div class="it1"></div>
<div class="it2"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.box{width:500px;height:300px;background:red}
.box:hover {filter: alpha(opacity=80);opacity: .8;}
.box:before {content: "";position: absolute;width: 100px;height: 100%;top: 0;left: -100%;overflow: hidden;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%);-webkit-transform: skewX(-30deg);-moz-transform: skewX(-30deg);transform: skewX(-30deg);}
.box:hover:before {left: 150%;transition: left 1.5s ease 0s}
</style>
</head>
<body>

<div class="box"></div>
</body>
</html>