css文字下滑,CSS3 文本下落渐变动效

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

body {

background: #ff5666;

}

.animate {

font: bold 70px 'Varela Round', sans-serif;

color: #fff;

width: 300px;

height: 50px;

text-align: center;

line-height: 50px;

position: absolute;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.animate .text {

display: inline-block;

-webkit-transform: translate(0, -20px);

-ms-transform: translate(0, -20px);

transform: translate(0, -20px);

opacity: 0;

-webkit-animation: fade-in 1s forwards;

animation: fade-in 1s forwards;

}

.animate .t-2 {

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.animate .t-3 {

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

}

.animate .t-4 {

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.animate .t-5 {

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

}

.animate .t-6 {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

@-webkit-keyframes fade-in {

100% {

opacity: 1;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

@keyframes fade-in {

100% {

opacity: 1;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

css文字下滑,CSS3 文本下落渐变动效相关推荐

css文字排列 - 代码篇
css文字排列 css3标准属性名值解释 writing-mode horizontal-tb // 默认值:水平方向,从上到下 writing-mode vertical-rl // 垂直方向 ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head>/* *通配符选择器匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种一种是内嵌 ...
[css]怎么改变选中文本的文字颜色和背景色？
[css]怎么改变选中文本的文字颜色和背景色? ::selection { background-color: #222; color: white; } 个人简介我是歌谣,欢迎和大家一起交流前后端 ...
html div 阴影效果,前端基础教程 CSS丨css3 文本阴影效果教程
大家都知道,现在普遍通用的就是 HTML5 和 CSS3 了,今天就带大家看看 CSS3 的效果. CSS3 文本效果 CSS3中包含几个新的文本特征.下面苏苏老师会给大家讲解以下文本属性: text ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
css图形动画,CSS3 实现图形下落动画效果
先看效果实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
html文本下划虚线代码,CSS文字链接下划虚线效果
CSS文字链接下划虚线效果_网页代码站(www.webdm.cn) BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-R ...

css文字下滑,CSS3 文本下落渐变动效

css文字下滑,CSS3 文本下落渐变动效相关推荐

最新文章

热门文章