DDR爱好者之家 Design By 杰米
今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果:
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板- <span class="shiny"><span class="inner-shiny">Shiny</span> </span>
css3代码:
CSS Code复制内容到剪贴板- body
- {
- background: #111;
- }
- .shiny
- {
- color: #F5C21B;
- background: -webkit-gradient(linear, left top, left bottombottom, from(#F5C21B), to(#D17000));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- display:block;
- width:610px;
- margin:auto;
- font-family: "Source Sans Pro", sans-serif;
- font-size: 13em;
- font-weight: 900;
- position: relative;
- text-transform: uppercase;
- }
- .shiny::before
- {
- background-position: -180px;
- -webkit-animation: flare 5s infinite;
- -webkit-animation-timing-function: linear;
- background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- content: "Shiny";
- color: #FFF;
- display: block;
- padding-right: 140px;
- position: absolute;
- }
- .shiny::after
- {
- content: "Shiny";
- color: #FFF;
- display: block;
- position: absolute;
- text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;
- top: 0;
- z-index: -1;
- }
- .inner-shiny::after, .inner-shiny::before
- {
- -webkit-animation: sparkle 5s infinite;
- -webkit-animation-timing-function: linear;
- background: #FFF;
- border-radius: 100%;
- box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;
- content: "";
- display: block;
- height: 10px;
- opacity: 0.7;
- position: absolute;
- width: 10px;
- }
- .inner-shiny::before
- {
- -webkit-animation-delay: 0.2s;
- height: 7px;
- left: 0.12em;
- top: 0.8em;
- width: 7px;
- }
- .inner-shiny::after
- {
- top: 0.32em;
- rightright: -5px;
- }
- @-webkit-keyframes flare
- {
- 0% { background-position: -180px; }
- 30% { background-position: 500px; }
- 100% { background-position: 500px; }
- }
- @-webkit-keyframes sparkle
- {
- 0% { opacity: 0; }
- 30% { opacity: 0; }
- 40% { opacity: 0.8; }
- 60% { opacity: 0; }
- 100% { opacity: 0; }
- }
以上就是css3实现的文字亮光特效的全部代码,制作起来很简单,看完以后希望大家能学习制作,谢谢阅读,希望能帮到大家,请继续关注,我们会努力分享更多优秀的文章。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年07月03日
2024年07月03日
- 单依纯《纯情歌》2024最新 开盘母带1:1直刻[547M]
- 永劫无间手游沈妙怎么样 技能奥义介绍
- 三角洲行动穿透机制介绍 穿透等级穿透效果一览
- 吟游战记巨刃特蕾值得培养吗 角色技能属性详解
- 逆水寒手游创意工坊玩法介绍 逆水寒创意工坊怎么玩
- 逆水寒手游雀隐重楼玩法介绍 逆水寒手游雀隐重楼是什么
- 逆水寒手游神器系统玩法攻略 逆水寒手游神器系统怎么玩
- PS5首席架构师提交新专利:PS5有望原生运行PS3游戏?
- 数据显示:《地狱潜者2》在PC平台已失去90%的玩家
- 质疑和守望先锋太像?《星鸣特攻》开发商:我们与众不同
- 【休闲沙发】VA-2024-CalmReflections:ChilloutYourMind(FLAC)
- 【迷幻沙发】Koan(公案)-2024-TheQueenofSpades(SideA)(FLAC)
- 群星2006-银河映像1996-20052CD[香港首版][WAV+CUE]
- 外媒盘点游戏里十大最可怕外星生物:第一名是老熟人
- 阿拉贡演员谈参演《咕噜》新电影:要视情况而定