一些有趣的 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> 

ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 特效html源码CSS 的文章

 本文最后更新于 2018/12/15 13:27:49,可能因经年累月而与现状有所差异

 引用转载请注明:VirCloud's Blog > 运维 > 一些有趣的 html/css 特效