CSS特效_CSS30条特效代码常用代码总结

2016年10月30日

阅读:1,697
1. CSS自动换行,强迫不换行,单行溢出文本显示省略号

自动换行

div{  
	word-wrap: break-word;  
	word-break: normal;  
} 

强迫不换行

div{  
	white-space:nowrap;
} 

强制换行

div{  
	word-break:break-all; /*支持IE,chrome,FF不支持*/
	word-wrap:break-word;/*支持IE,chrome,FF*/
} 

单行溢出文本显示省略号

div{  
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
} 
2. 网站表示哀悼时,网站页面显示灰色

自动换行

html{
	filter: grayscale(100%);	//IE浏览器
	-webkit-filter: grayscale(100%);//谷歌浏览器
	-moz-filter: grayscale(100%);	//火狐
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);	//谷歌浏览器
} 
4. 弹窗反弹一下显示窗口特效
div {
	-webkit-animation: showMore 0.3s;
	-moz-animation: showMore 0.3s;
	animation: showMore 0.3s;
}

@-webkit-keyframes showMore {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0); 
    }
    65% {
        transform: scale(1.02);
        -webkit-transform: scale(1.02); 
    }
    90% {
        transform: scale(0.98);
        -webkit-tranform: scale(0.98); 
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1); 
    } 
}

@-moz-keyframes showMore {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0); 
    }
    65% {
        transform: scale(1.02);
        -webkit-transform: scale(1.02); 
    }
    90% {
        transform: scale(0.98);
        -webkit-tranform: scale(0.98); 
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1); 
    } 
}

@keyframes showMore {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0); 
    }
    65% {
        transform: scale(1.02);
        -webkit-transform: scale(1.02); 
    }
    90% {
        transform: scale(0.98);
        -webkit-tranform: scale(0.98); 
    }
    100% {
        transform: scale(1);
        -webkit-transform: scale(1); 
    } 
}

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

榜上有名

广告