前端 - 那些你不知道的炫酷导航交互效果_个人文章 - SegmentFault 思否
基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好,后续将继续收集那些炫酷的交互效果,希望可以给你的项目添砖加瓦,更上一层楼。那些你不知道的炫酷交互效果系列:那些你不知道的炫酷按钮交互效果那些
2021-10-23 13:20:15
188
/*定义页面基础CSS*/
body{
font-family: \'microsoft yahei\',Arial,sans-serif;
color: #EFEFEF;
background: #222;
text-align: center;
margin-top: 50px;
}
/* 定义keyframe动画,命名为blink */
@keyframes blink{
0%{opacity: 1;}
50%{opacity: 1;}
50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */
{opacity: 0;}
}
/* 添加兼容性前缀 */
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
{ opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
{ opacity: 0; }
}
@-ms-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
{ opacity: 0; }
}
@-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
{ opacity: 0; }
}
/* 定义blink类*/
.blink{
animation: blink .75s linear infinite;
/* 其它浏览器兼容性前缀 */
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
color: #dd4814;
}
原文链接:http://www.gbtags.com/gb/rtreplayerpreview/38.htm#replayzone
31
2022-10
19
2022-10
15
2022-09
15
2022-09
14
2022-09
14
2022-09