温馨提示:
本文所述内容具有依赖性,可能因软硬条件不同而与预期有所差异,故请以实际为准,仅供参考。
本文记录平常看到的一些有趣的网页特效,应用到实际开发中可以起到一定的增色作用,大家可以试试看。
相关文章:《【教程】给网页标题增加特效》
一、隐藏特定文字,鼠标划过显示
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>
有趣,哈哈哈
Windows 7Chrome 65.0.3325.181来自 福建 的大神
Android 8.1.0Chrome 65.0.3325.109来自 河南 的大神
第一个好玩,有时间加到博客上
Windows 10Chrome 72.0.3610.2来自 山东 的大神
为啥我看到了草榴社区
哈哈哈哈哈
Windows 10Chrome 75.0.3770.100来自 中国 的大神
妙,就是那个FBI警告吓我一跳