css3设置动画无限循环(css3 实现文字闪烁效果的三种方式示例代码)
类别:Web前端 浏览量:767
时间:2021-11-05 14:08:44 css3设置动画无限循环
css3 实现文字闪烁效果的三种方式示例代码1.通过改变透明度来实现文字的渐变闪烁,效果图:
<!DOCTYPE html> <html> <head> </head> <title>文字闪烁</title> <body> <li class="blink"> 星星之火可以燎原 </li> </body> <style> .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight:bold; font-size:46px; } /* 定义keyframe动画,命名为blink */ @keyframes blink{ 0%{opacity: 1;} 100%{opacity: 0;} } /* 添加兼容性前缀 */ @-webkit-keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes blink { 0% {opacity: 1; } 100% { opacity: 0;} } @-o-keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } } /* 定义blink类*/ .blink{ color: red; font-size:46px; animation: blink 1s linear infinite; /* 其它浏览器兼容性前缀 */ -webkit-animation: blink 1s linear infinite; -moz-animation: blink 1s linear infinite; -ms-animation: blink 1s linear infinite; -o-animation: blink 1s linear infinite; } <style> </html>
如果不需要渐变闪烁效果,我们可以在keyframe动画中定义50%,50.1%的opacity的值。如下:
@-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } }
2.利用背景图片或者背景渐变,实现文字颜色的闪烁效果,效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .blink{ display: inline-block; font-size: 46px; margin: 10px; background: linear-gradient(left, #f71605, #e0f513); background: -webkit-linear-gradient(left, #f71605, #e0f513); background: -o-linear-gradient(right, #f71605, #e0f513); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation:scratchy 0.253s linear forwards infinite; /* 其它浏览器兼容性前缀 */ -webkit-animation:scratchy 0.253s linear forwards infinite; -moz-animation: scratchy 0.253s linear forwards infinite; -ms-animation: scratchy 0.253s linear forwards infinite; -o-animation: scratchy 0.253s linear forwards infinite; } @keyframes scratchy { 0% { background-position: 0 0; } 25% { background-position: 0 0; } 26% { background-position: 20px -20px; } 50% { background-position: 20px -20px; } 51% { background-position: 40px -40px; } 75% { background-position: 40px -40px; } 76% { background-position: 60px -60px; } 99% { background-position: 60px -60px; } 100% { background-position: 0 0; } } /* 添加兼容性前缀 */ @-webkit-keyframes scratchy { 0% { background-position: 0 0; } 25% { background-position: 0 0; } 26% { background-position: 20px -20px; } 50% { background-position: 20px -20px; } 51% { background-position: 40px -40px; } 75% { background-position: 40px -40px; } 76% { background-position: 60px -60px; } 99% { background-position: 60px -60px; } 100% { background-position: 0 0; } } @-moz-keyframes scratchy { 0% { background-position: 0 0; } 25% { background-position: 0 0; } 26% { background-position: 20px -20px; } 50% { background-position: 20px -20px; } 51% { background-position: 40px -40px; } 75% { background-position: 40px -40px; } 76% { background-position: 60px -60px; } 99% { background-position: 60px -60px; } 100% { background-position: 0 0; } } @-ms-keyframes scratchy { 0% { background-position: 0 0; } 25% { background-position: 0 0; } 26% { background-position: 20px -20px; } 50% { background-position: 20px -20px; } 51% { background-position: 40px -40px; } 75% { background-position: 40px -40px; } 76% { background-position: 60px -60px; } 99% { background-position: 60px -60px; } 100% { background-position: 0 0; } } @-o-keyframes scratchy { 0% { background-position: 0 0; } 25% { background-position: 0 0; } 26% { background-position: 20px -20px; } 50% { background-position: 20px -20px; } 51% { background-position: 40px -40px; } 75% { background-position: 40px -40px; } 76% { background-position: 60px -60px; } 99% { background-position: 60px -60px; } 100% { background-position: 0 0; } } </style> </head> <body> <li class="blink">星星之火可以燎原</li> </body> </html>
3.通过设置text-shadow的值,来实现文字阴影闪烁的效果,效果图:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .blink{ font-size: 46px; 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> </head> <body> <li class="blink">星星之火可以燎原</li> </body> </html>
感谢博客:https://blog.csdn.net/art_people/article/details/104768666/
到此这篇关于css3 实现文字闪烁效果的三种方式示例代码的文章就介绍到这了,更多相关css3文字闪烁内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css3盒子布局(CSS3弹性伸缩布局之box布局)
- css3导航菜单(CSS3实现的侧滑菜单)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- css flex布局教程(详解CSS3伸缩布局盒模型Flex布局)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- CSS3动画属性animation
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- 简述css盒子模型的认识(CSS3弹性盒模型开发笔记一)
- css3结合js制作(CSS3截取字符串实例代码推荐)
- css3伸缩布局教学(css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效)
- css3特性动画图(CSS3轻松实现清新 Loading 效果的简单实例)
- css3经典动画效果(CSS3 3D位移translate效果实例介绍)
- css3样式设计图片(CSS3 制作的彩虹按钮样式)
- css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
热门推荐
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- react常见问题(React编程中需要注意的两个错误)
- windows下nginx负载均衡配置(使用nginx配置访问wgcloud的方法)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- 微信昵称python(Python 微信之获取好友昵称并制作wordcloud的实例)
- laravel完成权限验证(laravel实现Auth认证,登录、注册后的页面回跳方法)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- php7语法代码规范(PHP7新功能总结)
- sqlserver技术文档(sql server2016里面的json功能浅析)