PROMULGATOR

    qianxingW

    北京市
    Html
    Css
    Js

    
                        


                        

                            


        /* 公用样式 */
        body {
	margin:0;
	height:0;
	background-color:#F1F1F1;
}
.warp {
	width:250px;
	height:150px;
	background-color:#5e7c87;
	float:left;
	margin:15px 15px;
	box-shadow:10px 10px 5px #888888;
}
.sim-button {
	line-height:50px;
	height:50px;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	margin-top:50px;
	width:60%;
	cursor:pointer;
	color:rgba(255,255,255,1);
	border:1px solid rgba(255,255,255,0.5);
}
/* 效果一 */
        .button1 {
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button1:hover {
	background-color:rgba(255,255,255,0.2);
	border-radius:20px;
}
/* 效果2 */
        .button2 {
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
	overflow:hidden;
	position:relative;
}
.button2:hover {
	background-color:rgba(255,255,255,0.2);
}
.button2>span {
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button2:hover>span {
	opacity:0;
}
.button2::after {
	content:attr(data-text);
	width:100%;
	height:100%;
	position:absolute;
	left:-50px;
	top:0;
	opacity:0;
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button2:hover::after {
	left:0;
	opacity:1;
}
/* 效果三 */
         .button3 {
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
	overflow:hidden;
	position:relative;
}
.button3:hover {
	background-color:rgba(255,255,255,0.2);
}
.button3>span {
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button3:hover>span {
	opacity:0;
}
.button3::after {
	content:attr(data-text);
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	-webkit-transform:translate(-9%,-50%) rotate(-9deg);
	transform:translate(-9%,-50%) rotate(-9deg);
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button3:hover::after {
	-webkit-transform:translate(0,0) rotate(0deg);
	transform:translate(0,0) rotate(0deg);
	opacity:1;
}
/* 效果四 */
        .button4 {
	position:relative;
	overflow:hidden;
}
.button4 span {
	z-index:2;
}
.button4::after {
	content:"";
	width:100%;
	height:100%;
	z-index:1;
	opacity:0;
	position:absolute;
	left:0;
	top:0;
	background-color:rgba(255,255,255,0.5);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button4:hover::after {
	opacity:1;
	-webkit-transform:skewX(-180deg) scale(0.5,1);
	transform:skewX(-180deg) scale(0.5,1);
}
/* 效果五 */
        .button5 {
	border:none;
	position:relative;
}
.button5::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid rgba(255,255,255,0.5);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button5:hover::before {
	opacity:0;
	-webkit-transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
}
.button5::after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	background-color:rgba(255,255,255,0.5);
	-webkit-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button5:hover::after {
	opacity:1;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
}
/* 效果六 */
        .button6 {
	border:none;
	position:relative;
}
.button6::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.5);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button6:hover::before {
	opacity:0;
	-webkit-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
}
.button6::after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	border:1px solid rgba(255,255,255,0.5);
	-webkit-transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button6:hover::after {
	opacity:1;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
}
/* 效果七 27*/
        .button7 {
	border:1px solid rgba(255,255,255,0.5);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
	overflow:hidden;
	position:relative;
}
.button7:hover {
	border:1px solid rgba(255,255,255,0);
}
.button7::before {
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background-color:rgba(255,255,255,0.5);
	-webkit-transform:translate(-100%,-600%) rotate(9deg);
	transform:translate(-100%,-600%)  rotate(9deg);
	-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);
	transition-timing-function:cubic-bezier(0.75,0,0.125,1);
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
}
.button7:hover::before {
	-webkit-transform:translate(0,0);
	transform:translate(0,0);
}
/* 效果八 */
        .button8 {
	color:rgba(255,255,255,1);
	border:none;
	position:relative;
}
.button8:hover>span {
	letter-spacing:2px;
}
.button8::before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	opacity:0;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
	border-top-width:1px;
	border-bottom-width:1px;
	border-top-style:solid;
	border-bottom-style:solid;
	border-top-color:rgba(255,255,255,0.5);
	border-bottom-color:rgba(255,255,255,0.5);
	-webkit-transform:scale(0.1,1);
	transform:scale(0.1,1);
}
.button8:hover::before {
	opacity:1;
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
}
.button8::after {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	background-color:rgba(255,255,255,0.25);
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button8:hover::after {
	opacity:0;
	-webkit-transform:scale(0.1,1);
	transform:scale(0.1,1);
}
/* 效果九 */
        .button9 {
	color:rgba(255,255,255,1);
	border:none;
	position:relative;
	border-top-width:1px;
	border-bottom-width:1px;
	border-top-style:solid;
	border-bottom-style:solid;
	border-top-color:rgba(255,255,255,0.5);
	border-bottom-color:rgba(255,255,255,0.5);
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button9:hover span {
	letter-spacing:2px;
}
.button9:hover {
	border-top-color:rgba(255,255,255,0);
	border-bottom-color:rgba(255,255,255,0);
}
.button9::before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	width:1px;
	height:100%;
	z-index:1;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
	background-color:rgba(255,255,255,0.5);
}
.button9:hover::before {
	-webkit-transform:translate(-76px,0) rotate(270deg);
	transform:translate(-76px,0) rotate(270deg);
}
.button9::after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:1px;
	height:100%;
	z-index:1;
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
	background-color:rgba(255,255,255,0.5);
}
.button9:hover::after {
	-webkit-transform:translate(76px,0) rotate(180deg);
	transform:translate(76px,0) rotate(180deg);
}
/* 效果十 */
        .button10 {
	-webkit-transition:all 0.3s;
	transition:all 0.3s;
}
.button10:hover {
	-webkit-animation-name:move;
	animation-name:move;
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	background-color:rgba(255,255,255,0.2);
}
@-webkit-keyframes move {
	from,11.1%,to {
	-webkit-transform:none;
	transform:none;
}
22.2% {
	-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
	transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
	-webkit-transform:skewX(6.25deg) skewY(6.25deg);
	transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
	-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
	transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
	-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
	transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
	-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);
	transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
	-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
	transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
	-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
	transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}@keyframes move {
	from,11.1%,to {
	-webkit-transform:none;
	transform:none;
}
22.2% {
	-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);
	transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
	-webkit-transform:skewX(6.25deg) skewY(6.25deg);
	transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
	-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);
	transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
	-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);
	transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
	-webkit-transform:skewX(-0.78125deg) skewY(-0.78125deg);
	transform:skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
	-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);
	transform:skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
	-webkit-transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
	transform:skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
css鼠标滑过特效

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             

                         

                     

                   
                


                
2



  
    
      
    
    

     

            
    
              
    
              
      
                
       漂浮在外的幽灵0
      
                
       2017/8/25 10:54:51
      
                
      
              
    
              
      
                看了一篇，是CSS3 属性transform与transition的配合使用。应用手机端没什么问题，PC的话，IE9也就支持到1,7,8,9。
                
                回复
                
      
                
      
              
    
            
    



  
                   
         
         

            
    
              
    
              
      
                
       【Because。】0
      
                
       2017/8/24 16:10:00