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>