一些有趣的 html/css 特效

本文记录平常看到的一些有趣的网页特效，应用到实际开发中可以起到一定的增色作用，大家可以试试看。

相关文章：《【教程】给网页标题增加特效》

一、隐藏特定文字，鼠标划过显示

1、应用场景

某些不是特别重要的描述，与读者互动，让文章生动有趣。

2、效果：

3、代码：

<span class="heimu" title="你知道的太多了">你知道的太多了。</span>
<style>
.heimu {
    background-color: #000;
    color: #000;
    text-shadow: none;
    transition: background-color .4s;
}
.heimu:hover {
    background-color: transparent;
}
</style>

二、全站网页变灰

1、应用场景：

在遇到某些严重的天灾人祸时，将页面变成灰色表示哀思。

2、效果：

3、代码：

<style>
html{overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
</style>

三、文字渐变跳动

1、应用场景

比如广告推广等想要特别突出某些文字。

2、效果

3 、代码

<style>
@keyframes sidehb_i{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-webkit-keyframes sidehb_i {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes sidehb_i {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes sidehb_i {
0% {opacity: 1; }
100% { opacity: 0;}
}
@-o-keyframes sidehb_i {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sidehb_i{
animation: sidehb_i 1s linear infinite;
-webkit-animation: sidehb_i 1s linear infinite;
-moz-animation: sidehb_i 1s linear infinite;
-ms-animation: sidehb_i 1s linear infinite;
-o-animation: sidehb_i 1s linear infinite;
}
</style>
<span class="sidehb_i">￥</span>

如果不要渐变，则 keyframe设置如下即可：

@-webkit-keyframes sidehb_i {
    0% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}

四、文字闪烁

1、使用场景

比如广告推广等想要特别突出某些文字。

2、效果

3、代码

<div class="box">闪烁效果</div>
<style>  
.box{ 
font-size: 20px; 
color:#4cc134; 
margin: 10px;
animation: changeshadow 1s  ease-in  infinite ;
-webkit-animation: changeshadow 1s linear infinite;
-moz-animation: changeshadow 1s linear infinite;
-ms-animation: changeshadow 1s linear infinite;
-o-animation: changeshadow 1s linear infinite;
}  
@keyframes changeshadow {  
0%{ text-shadow: 0 0 4px #4cc134}  
50%{ text-shadow: 0 0 40px #4cc134}  
100%{ text-shadow: 0 0 4px #4cc134}  
}
@-webkit-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}  
50%{ text-shadow: 0 0 40px #4cc134}  
100%{ text-shadow: 0 0 4px #4cc134}  
}
@-moz-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}  
50%{ text-shadow: 0 0 40px #4cc134}  
100%{ text-shadow: 0 0 4px #4cc134}  
}
@-ms-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}  
50%{ text-shadow: 0 0 40px #4cc134}  
100%{ text-shadow: 0 0 4px #4cc134}  
}
@-o-keyframes changeshadow {
0%{ text-shadow: 0 0 4px #4cc134}  
50%{ text-shadow: 0 0 40px #4cc134}  
100%{ text-shadow: 0 0 4px #4cc134}  
}
</style>