深圳网站建设 利科技有限公司,网店美工心得体会,网站开发模块就业前景,重庆个人建站模板大家好#xff0c;我是 Just#xff0c;这里是「设计师工作日常」#xff0c;今天分享的是利用 animation 动画实现一个闪烁的霓虹灯文字效果。 《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html…大家好我是 Just这里是「设计师工作日常」今天分享的是利用 animation 动画实现一个闪烁的霓虹灯文字效果。 《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面渲染效果 整体效果 利用 animation 动画设置关键帧参数再设置不同的延迟时间达到一个闪烁的效果。 此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。 核心代码部分简要说明了写法思路完整代码在最后可直接复制到本地运行。
核心代码
html 代码
div classlight23div classtitle23span鸿/spanspan星/spanspan尔/spanspan克/span/divdiv classinfo23spanto be number one/span/div
/div页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”。 css 部分代码
.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize; /* 设置英文首字母大写 */
}
.light23:hover .title23 span{animation: light 0.4s ease forwards; /* 设置 forwards 属性让动画保持在最后一个值 */
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100% {color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}利用 animation 动画在关键帧中设置不同的显示效果然后不同的元素设置 animation-delay 加上不同的延迟时间形成闪烁的视觉效果。 注意设置 animation 动画时animation-fill-mode 要设置为 forwards以使动画执行完后保持在最后的状态不变。
完整代码如下
html 页面
!DOCTYPE html
html langzhheadmeta charsetutf-8link relstylesheet hrefstyle.csstitle闪烁的霓虹灯文字/title/headbodydiv classappdiv classlight23div classtitle23span鸿/spanspan星/spanspan尔/spanspan克/span/divdiv classinfo23spanto be number one/span/div/div/div/body
/htmlcss 样式
/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize;
}
.light23:hover .title23 span{animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100%{color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}页面渲染效果 以上就是所有代码以及简单的思路希望对你有一些帮助或者启发。 [1] 原文阅读 CSS 是一种很酷很有趣的计算机语言在这里跟大家分享一些 CSS 实例 Demo为学习者获取灵感和思路提供一点帮助希望你们喜欢。
我是 Just这里是「设计师工作日常」求点赞求关注
