zoukankan      html  css  js  c++  java
  • CSS3动画闪跳

    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>
    

      

  • 相关阅读:
    POJ3693 Maximum repetition substring —— 后缀数组 重复次数最多的连续重复子串
    SPOJ
    POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
    POJ3261 Milk Patterns —— 后缀数组 出现k次且可重叠的最长子串
    POJ1743 Musical Theme —— 后缀数组 重复出现且不重叠的最长子串
    SPOJ
    AC自动机小结
    HDU3247 Resource Archiver —— AC自动机 + BFS最短路 + 状压DP
    POJ1625 Censored! —— AC自动机 + DP + 大数
    Herding
  • 原文地址:https://www.cnblogs.com/htzan/p/6920305.html
Copyright © 2011-2022 走看看