简单的css文字动画效果_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

实现效果

实现代码

html

<div id=container>
  Welcome 
  <div id=flip>
    <div><div>jb51</div></div>
    <div><div>真格学网</div></div>
    <div><div>欢迎访问</div></div>
  </div>
  
</div>

<p>a css3 animation demo</p>

css

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

以上就是简单的css文字动画效果的详细内容,更多关于css文字动画效果的资料请关注真格学网其它相关文章!


  • 本文相关:
  • vue+css3实现文字飞入飞出动画特效代码
  • css3 文字动画效果
  • css3文字图标组合悬停ui动画特效源码
  • 基于css3+svg实现的文字轮廓边框线条动画特效源码
  • css3悬停文字交叉飘动切换动画特效
  • css3实现的立体文字重叠动画特效源码
  • js+css3实现彩色文字标签云3d立体旋转动画特效
  • css3+svg实现炫酷的霓虹灯发光文字动画特效源码
  • jquery基于css3制作的文字碎片化loading加载动画特效源码
  • css3+animation属性制作拆分loading文字加载动画特效
  • 如何用纯css制作动态网页效果?
  • 如何用css实现网页的动态效果
  • css3图片文字实现动画效果
  • 如何制作HTML字幕动画效果!如何制作HTML字幕动画...
  • 求个大神帮我写个很简单的css动画
  • 关于代码!如何制作HTML字幕动画效果!
  • 如何利用CSS3制作3D效果文字具体实现样式
  • 怎样在CSS代码里加入动态文字效果
  • 怎样用最简单的html+css代码制作一颗跳动的心
  • 简单的网页效果问题(div css),这样的网页效果要...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css文字css3+animation属性制作拆分loading文字加载动画特效css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字简单的css文字动画效果css实现的圆形进度栏详解css 文字装饰 text-decoration &amp; text-emhtml+css合并表格边框的示例代码css实现漂亮的时钟动画效果的实例代码使用css样式设计一个简单的html登陆界面的实现css3实现模糊背景的三种效果示例原生css实现文字无限轮播的通用方法css实现多个元素在盒子内两端对齐效果css实现移动端横向滚动导航条(pc端也适用)
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved