空心文字闪动--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:阴影类型 ...

随机推荐

3.linux man手册
(12) man作用:查询man手册,获得帮助信息man 1 ls 1表示查询的是linux命令man 2 xxx 2表示查询的是linux apiman 3 xxx 3表示查询的是C库函数注意:在m ...
通过两根RS232连接两台电脑
把RS232的有5脚那边放下面,最左边是GND,第二三是TXD和RXD,两个RS232反接,然后两个usb连接电脑就可以通信了
SQL调用存储过程
--1调用存储过程exec 存储过程名参数--2当表使用select a.*,b.* from tb b inner join (select * from openrowset('sqloledb ...
（1）创建一个叫做People的类：属性：姓名、年龄、性别、身高行为：说话、计算加法、改名编写能为所有属性赋值的构造方法；（2）创建主类：创建一个对象：名叫“张三”，性别“男”，年龄18岁，身高1.80；让该对象调用成员方法：说出“你好！” 计算23+45的值将名字改为“李四”
package a; public class People { private String name,sex; private int age; private double height; pu ...
Win7 winsock 注册表文件
http://files.cnblogs.com/xsmhero/Winsock_Win7x64.rar
05_IOC容器装配Bean(注解方式)
IOC容器装配Bean(注解方式) 1.使用注解方式进行Bean注册 xml 方式: <bean id="" class=""> spring2.5 ...
hashcat
作者: 官网:https://hashcat.net/oclhashcat/ 功能:hash破解
SQL行转列
目的:将相同条件的多行值合并到同一列, 1.创建测试表: CREATE TABLE [dbo].[TB_01]( ) NULL, ) NULL, [SDATE] [datetime] NULL ) O ...
So easy Webservice 6.使用EndPoint发布webservice服务
创建第一个Web服务: @WebService // 添加了此注解,代表是一个WebService public class HelloWorld { // 非 static final privat ...
C#强制清除缓存
#region 强制清除缓存 [DllImport("kernel32.dll", EntryPoint = "SetProcessWorkingSetSize" ...

空心文字闪动--css3

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

随机推荐

热门专题