css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。感兴趣的朋友可以进来学习一下
今天给大家分享一款纯css3实现的文字亮光特效。这款特效文字上一道亮光逐渐扫过文字。效果非常漂亮。一起看下效果:
实现的代码。
html代码:Shiny
css3代码: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; }
}
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
css3 卡片亮光_利用css3实现文字亮光特效的代码相关推荐
- css3三角形兼容_利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 利用html实现文字闪烁的效果代码
利用html实现文字闪烁的效果代码 单个元素设置闪烁效果 多个元素设置闪烁效果 网页中使文字闪烁的标签是什么,其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现. 单个元素设置闪烁效果 ...
- css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
- css3绘制环形_利用CSS简单地绘制一个操场
前言 伴随着 CSS3(CSS Module 3)的发布,我们设计网页时有了更多的选择.对于一些比较简单的小图标和图片,我们可以利用 CSS3 很方便的进行绘制,从而减少页面的图片数量和HTTP请求次 ...
- HTML5+CSS3小实例:酷炫的文字裂开特效
HTML5+CSS3实现酷炫的文字裂开特效,鼠标悬停,文字上下裂开,中间显示更多说明,悬停时,其他文字模糊,不说了,看看效果有多酷炫吧! 效果: 源码: <!DOCTYPE html> & ...
- python计算面积代码_利用Python求阴影部分的面积实例代码
利用Python求阴影部分的面积实例代码 来源:中文源码网 浏览: 次 日期:2019年11月5日 [下载文档: 利用Python求阴影部分的面积实例代码.txt ] (友情提示:右键点 ...
- 乌鸦飞过flash素材下载_会声会影仿AE文字动画特效教程-会声会影中文官网
现在人多少有点娱乐至死的精神,没事就爱点找乐子,许是窥出了百姓这点心思,各大卫视都争相推出各自的综艺王牌节目,但是僧多粥少,要想争得收视王,自然要贴合观众逗逼搞笑的心性,本集小编同大家分享一个快速获取 ...
- css3 图片裁剪菱形,利用CSS3 clip-path裁剪各种图形。
'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...
- css3动画字幕_使用CSS3动画创建高级“字幕”
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 今天,我们将再次看一看"字幕 ...
最新文章
- 属性项目的定义(property)[ZT]
- 编程之美-一摞烙饼的排序方法整理
- 关于win7的64位和32位有什么不同性价比怎么比
- IOS 关于ipad iphone5s崩溃 解决
- SCCM 2007系列教程之六使用组策略实现SCCM客户端
- 微信小程序小结(3) -- 使用wxParse解析html及多数据循环
- 复制书稿(信息学奥赛一本通-T1278)
- 第一章:了解SQL_数据库基础
- Eclipse 最佳字体 推荐
- 计算机度分秒在线,角度分秒换算(度分秒换算器在线)
- 用c++编程六子棋游戏
- linux slab 内存 清理,linux系统slab内存占用
- 舞伴问题(数据结构队列,c语言版)
- Harvard (name and date) 论文引用格式
- git将master分支develop的操作
- CentOS6.6下配置KMS自动激活服务器
- 20189200余超 2018-2019-2 移动平台应用开发实践第六周作业
- 服务器域名绑定公网IP地址
- sql server2012 分页查询语句
- ps-扣图章及纯色图片
热门文章
- 汇编语言之寄存器使用(bx,si,di,bp)
- XmlHttp学习笔记
- 一些很酷的.Net技
- PDO(PHP Data Object),Mysqli,以及对sql注入等问题的解决
- 18.16 gcc-3.4.5编译错误及解决方法集锦
- 安装VMware,出现Microsoft Runtime DLL 安装程序未能完成安装,解决方法
- DB2锁表或超时解决方案
- Python日期字符串到日期对象
- npm package.json文件中的依赖关系,devDependencies和peerDependencies之间有什么区别?
- 如何设置TextView textStyle,例如粗体,斜体