CSS3 自定义的闪烁的文本输入光标

CSS3 Blinking Text Cursor

CSS3

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5313
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*Thick font*/

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:700);
/*Script font*/

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two);
/*Reading font*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic);
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    padding: 30px;
    color: white;
    text-align: center;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    background-image: -webkit-radial-gradient(#34362e, #272822 80%);
    background-image: radial-gradient(#34362e, #272822 80%);
}
a,
a:visited {
    color: #6d9adf;
}
a:hover {
    color: #c90;
    text-decoration: none;
}
hr {
    margin: 30px auto;
    border: none;
    border-top: #666 1px dotted;
}
h1 {
    text-align: center;
    margin-top: 0;
}
ul {
    padding-left: 15px;
}
li {
    margin-bottom: 20px;
}
time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
}
code,
pre {
    padding: 5px;
    font-style: italic;
    background: rgba(0, 0, 0, 0.15);
    font: 14px Courier;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    color: #999;
}
.new-window {
    position: relative;
    padding-right: 16px;
}
.new-window:after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    position: absolute;
    top: 10%;
    right: 0;
    background: url(http://i.imgur.com/EAxm4BB.gif) no-repeat;
}
.clear:before,
.clear:after {
    content: "";
    display: table;
}
.clear:after {
    clear: both;
}
.blinker {
    -webkit-animation-name: blinker;
    animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    display: inline-block;
    width: 8px;
    height: 100px;
    margin-left: 10px;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    background: #c90;
}
@-webkit-keyframes blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
h1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 80px;
}
time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
}

HTML

CSS3 Blinking Text Cursor

CSS3

编辑器支持Emmet

快捷键

CSS3 Blinking Text Cursor

CSS3

使用CSS3 clip-path实现的标题文本水纹波动动画特效

CSS3 带不稳定性闪烁的氩气霓虹灯效果字体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：