空心文字闪动--css3

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0 ;padding:0;}

        .con{margin:20px auto;width:500px;text-align:center}

        .con span{

           /* font-size:100px;

            -webkit-text-fill-color: white;

            -webkit-text-stroke-color: red;

            -webkit-text-stroke-width: 2px;

            text-stroke-color: red;

            text-stroke-width: 2px;*/

            -webkit-text-fill-color:#fff;

            -webkit-text-stroke: 1px #333;

            font-size:30px;

            font-family:"microsoft yahei";

            letter-spacing:20px;

        }

        span{

            -webkit-animation:anima 2s linear infinite;

        }

        @-webkit-keyframes anima{

            0%{-webkit-transform:translate(0,0);}

            20%{-webkit-transform:translate(0,-14px);}

            25%{-webkit-transform:translate(0,-15px);}

            30%{-webkit-transform:translate(0,-14px);}

            50%{-webkit-transform:translate(0,0px);}

            60%{-webkit-transform:translate(0,14px);}

            70%{-webkit-transform:translate(0,15px);}

            80%{-webkit-transform:translate(0,14px);}

            100%{-webkit-transform:translate(0,0);}

        }

        .span1{-webkit-animation-delay:0s;}

        .span2{-webkit-animation-delay:0.3s;}

        .span3{-webkit-animation-delay:0.6s;}

        .span4{-webkit-animation-delay:0.9s;}

    </style>

</head>

<body>

    <div class="con">

        <span class="span1">我</span>

        <span class="span2">是</span>

        <span class="span3">好</span>

        <span class="span4">人</span>

    </div>

</body>

</html>

html

空心文字闪动--css3的更多相关文章

WPF自定义空心文字
首先创建一个自定义控件,继承自FrameworkElement,“Generic.xaml”中可以不添加样式. 要自定义空心文字,要用到绘制格式化文本FormattedText类.FormattedT ...
CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...
Flash-制作空心文字
常常看到站点上用很多空心文字作为站点的名称或者特色项目的名称等等,那这些空心文字是怎么做出来的呢? 用Flash事实上非常快就能做出来.过程例如以下: (1)新建空白文件.工具箱中选择"文本 ...
css3 文字闪动效果
<div id="container"> 这里查看“<span class="blink">闪烁效果</span>”,ENj ...
从小姐姐博客那里看到的流光文字（CSS3 animate）
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.你们卟懂绯紸流!色彩缤纷的QQ空间...... 还记得那些炫酷的签名档,或者那些炫酷的动态头像.不过大家对于流光文字的印象还是图片.那么在网页 ...
element-ui多选框模糊搜索输入文字闪动问题
.el-select__tags { .el-select__input { width: 50px !important; } } 添加这段代码即可 <el-select v-model=&q ...
css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...
纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
css3投影讲解、投影
迷茫了好一段时间,今天开始整理一下自己,同时也整理下新的知识. CSS3: 从头开始做起:现在在页面中用到最多的是图片/容器投影,文字投影: 接下来就总结一个投影问题: box-shadow:阴影类型 ...

随机推荐

Struts2的输入校验（2）——客户端校验
Struts2的输入校验(2) --客户端校验 Struts2客户端校验的使用: (1)使用Struts2的标签生成输入页面的表单: (2)为该<s:form>元素添加validate=& ...
六、IO流——文件
IO流1.字节流(InputStream.OutputStream)2.字符流 (Reader.Writer)3.缓冲流(BufferedInputStream.BufferedOutputStrea ...
BZOJ 2324 营救皮卡丘（最小费用最大流）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2324 题意:n+1个城市(0到n).初始时K个人都在0城市.城市之间有距离.要求(1) ...
正则表达式(/[^0-9]/g,'')中的"/g"是什么意思？
正则表达式(/[^0-9]/g,'')中的"/g"是什么意思 ? 表达式加上参数g之后,表明可以进行全局匹配,注意这里“可以”的含义.我们详细叙述: 1)对于表达式对象的e ...
jdk安装环境变量设置
设置JAVA_HOME,点击新建,变量名:JAVA_HOME,变量值:D:\java\jdk1.7.0,即刚才jdk安装的路径. 设置CLASSPATH属性,变量名:CLASSPATH,变量值:. ...
html之a标签
屏蔽跳转 1.href属性删除 2.href="javascript:void(0);" void是一个操作符,void(0)返回undefined,地址不发生跳转. 3.s ...
[SAP ABAP开发技术总结]反射，动态创建内表、结构、变量
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
js 监听监键盘动作（转）
主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydo ...
慎重别选择到"僵尸"软件
何谓僵尸? 没有灵魂,动作单一,我们电视电影上经常看见, 只能往前跳,不会走路, 手向前伸直,左右摆攻击. 何谓"僵尸"软件? 根据僵尸的特性,大概有如下几类: 1.没有任何创新性 ...
iOS - OC NSTimeZone 时区
前言 @interface NSTimeZone : NSObject <NSCopying, NSSecureCoding> NSTimeZone 表示时区信息. 1.NSTimeZon ...

空心文字闪动--css3

空心文字闪动--css3的更多相关文章

随机推荐

热门专题