对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代。你们卟懂绯紸流!色彩缤纷的QQ空间......

还记得那些炫酷的签名档,或者那些炫酷的动态头像。不过大家对于流光文字的印象还是图片。那么在网页中怎么实现呢?

你说的在网页里面插入一张图片不就搞定了。这,,,确实可以。今天要讲的是利用纯CSS3绘制流光文字,可以直接显示,并不需要图片。

css代码:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){#masked{background-image: -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-background-size:200% 100%;-webkit-animation:masked-animation 4s infinite linear}}@-webkit-keyframes masked-animation{0%{background-position:0 0}100%{background-position:-100% 0}}

插入标签id即可:<p id="masked">cosyer的博客</p>

从小姐姐博客那里看到的流光文字(CSS3 animate)的更多相关文章

  1. jupyter巨好玩-使用jupyter结合VScode写博客

    打开jupyter-ipython 其实人家就叫jupyter了,后面咱可能就少提ipython了. # 打开命令行,让我们输入 jupyter notebook 当然,这个前提是你已经安装了jupy ...

  2. 团队作业9——Beta版本展示博客

    一. 骆杰宁(组长) 风格:少说话,多做事. 擅长技术:Jsp 编程兴趣:GUI 希望角色:PM 一句话宣言:年轻是本钱,不努力就不值钱. 胡丹丹 风格:不断沉淀自己 擅长技术:擅长TCP/IP协议模 ...

  3. Python爬虫小实践:爬取任意CSDN博客所有文章的文字内容(或可改写为保存其他的元素),间接增加博客访问量

    Python并不是我的主业,当初学Python主要是为了学爬虫,以为自己觉得能够从网上爬东西是一件非常神奇又是一件非常有用的事情,因为我们可以获取一些方面的数据或者其他的东西,反正各有用处. 这两天闲 ...

  4. github page+jekyll构建博客的解决方案

    想在github page上构建自己的博客,前几个星期就动手搞了起来,但由于自己对于前端这些东西不是很熟,所以断断续续的,直到今天才把所有东西都搞懂,而且构建出自己的github博客了. 最终效果,大 ...

  5. 博客营销(Blog Marketing)

    一.什么是博客营销 博客营销(Blog Marketing)的概念可以说并没有严格的定义,简单来说,就是利用博客这种网络应用形式开展网络营销.要说明什么是博客营销,首先要从什么是博客说起. 博客(Bl ...

  6. 用 HTML 编写博客栏目

    “生活中不是缺少美,而是缺少发现美的眼睛. -----罗丹 在之前阅读师哥师姐们博客的时候,尤其是那些感觉非常优秀博客的时候就注意到了一个东西..... ----------------------- ...

  7. iOS 推荐博客

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:http://www.zhihu.com/question/20264108/answer/3026 ...

  8. [置顶] 博客停止更新 && 我的大学数年

    博客停止更新 前言: 这些天,一直还没有时间发表这篇博文,近期,做了一个决定:博客更新停止. 我有话说: 这些天来,还真是感谢大家的关注了.从2011年的07至今,2013年的07月,两个年头,写下了 ...

  9. 应届生求职:IT博客真能当技术型职位的求职利器?

    正值一年一度的大学毕业季,面对严峻的就业形势,700万大学毕业生,不到三成的签约率,可真是苦煞了没有工作经验,也没有项目经验的应届毕业生们.拿什么打动面试官?成绩?特长?社会实践?如果这些都不能让阅读 ...

随机推荐

  1. Codeforces Round #354 (Div. 2)——C. Vasya and String(尺取)

    C. Vasya and String time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. BZOJ 3028 食物 ——生成函数

    把所有东西的生成函数搞出来. 发现结果是x*(1-x)^(-4) 然后把(1-x)^(-4)求逆,得到(1+x+x^2+...)^4 然后考虑次数为n的项前的系数,就相当于选任意四个非负整数构成n的方 ...

  3. 刷题总结——小z的袜子(bzoj2038)

    题目: Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把 ...

  4. 高一python笔记大全(过会考)

    最初のプログラム xfは.どちらかの試合(しあい)活動(かつどう)に参加して.a秒(aは整数)を使ったのですが.今あなたがひとつ任務を有:分と秒数を出力するください. a=int(input(&quo ...

  5. hdu 2859

    #include<stdio.h> char s[1010][1010]; int map[1010][1010]; int main() {  int n,i,j,k,ii,jj;  w ...

  6. CI(CodeIgniter)框架中的增删改查操作

    我们创建一个模型( 项目目录/models/),请注意:模型名与文件名相同且必须继承数据核心类CI_Model,同时重载父类中的构造方法 CodeIgniter的数据函数类在 \models\User ...

  7. chef cookbook 实战

    在Workstation中创建cookbook,并且上传到Chef server,以及其他与Chef相关的工作. 安装chef client命令 knife bootstrap 10.6.1.207 ...

  8. 教妹学 Java:大有可为的集合

    00.故事的起源 “二哥,上一篇<泛型>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很是关心. “有人评论说,‘二哥你敲代码都敲出幻想了啊.’” “呵呵,这句话 ...

  9. 2.JAVA语言基础部分

    1.语言基础 二进制操作 "&"按位与:a与b同时为1结果为1,否则为0: "|"按位或:a与b其中任一个为1,否则为0 "~"按位 ...

  10. 深入GCD(二): 多核心的性能

    概念为了在单一进程中充分发挥多核的优势,我们有必要使用多线程技术(我们没必要去提多进程,这玩意儿和GCD没关系).在低层,GCD全局dispatch queue仅仅是工作线程池的抽象.这些队列中的Bl ...