Alloy Team首页的元素Hover效果
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
100%;
height: 200px;
background-color: #1BBBC3;
position: relative;
}
.box .line{
cursor: pointer;
position: absolute;
left: -100%;
top: 0;
100%;
height: 100%;
background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg)
}
.box:hover .line{
-webkit-transition: all .5s ease;
transition: all .5s ease;
left: 100%
}
.box2{
margin-top: 20px;
265px;
height: 200px;
border-radius: 5px;
background-color: #89d04f!important;
position: relative;
padding: 20px 10px;
color: #fff;
-webkit-transition: all .3s ease;
transition: all .3s ease;
overflow: hidden;
}
.box2:hover{
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
-moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
</style>
</head>
<body>
<div class="box">
<div class="line"></div>
</div>
<div class="box box2">
<div class="line"></div>
</div>
</body>
</html>
CSS3七彩文字
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #333;
}
@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
.text{
background-image: -webkit-linear-gradient(left,#cddc39,#ff9800 25%,#cddc39 50%,#ff9800 75%,#cddc39)!important;
-webkit-text-fill-color: transparent!important;
-webkit-background-clip: text!important;
-webkit-background-size: 200% 100%!important;
-webkit-animation: masked-animation 2s infinite linear!important;
}
.text:hover {
color: #f2b535;
background: none;
}
}
.text:hover{
-webkit-animation: masked-animation 1s infinite linear!important;
}
@-webkit-keyframes masked-animation {
0% {
background-position: 0 0
}
to {
background-position: -100% 0
}
}
</style>
</head>
<body>
<div><a href="" class="text">勇士是冠军</a></div>
<div><span class="text">勇士是冠军</span></div>
<div><span class="text">勇士是冠军</span></div>
</body>
</html>