当前位置: 萬仟网 > IT编程>网页制作>CSS > 简单的css文字动画效果

简单的css文字动画效果

2021年04月06日  | 萬仟网IT编程  | 我要评论
实现效果实现代码html<div id=container> welcome <div id=flip> <div><div>jb51<

实现效果

实现代码

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文字动画效果的资料请关注萬仟网其它相关文章!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • CSS3的calc()做响应模式布局的实现方法

     REM方法 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的... [阅读全文]
  • 怎样才能使大网站规范

    asp开发规范 一、单页编写规范: 切记页面要分模块来写: 第一模块:接收参数。[有可能从不同页面提交到同一个页面;也可能出现两... [阅读全文]
  • css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    这篇文章主要为大家介绍了正方形图片使用CSS如何实现成圆形布局,不使用PS软件处理,直接使用DIV CSS布局如何实现图片圆形化,具体实现过程请看下文... 1... [阅读全文]
  • 网页布局基础

    1、盒子模型的第一层到第五层: border、padding+content、background-image、background-color、m... [阅读全文]
  • html篇

    ,超文本标记语言,不是一种编程语言,而是一种标记语言 _思想:网页中有很多数据,不同的数据可能需要不同的显示效果,一个标签相当于一个容器,想要修改容器内... [阅读全文]
  • css样式的继承性、层叠性 、优先级

    一、css样式的继承性: 作用:给父元素设置一些属性,子元素也可以使用 应用场景: 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字... [阅读全文]
  • CSS3实现内凹圆角的实例代码

    本篇文章主要介绍了CSS3实现内凹圆角的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ... 17-05-04 [阅读全文]
  • CSS的再深入2(更新中···)

    在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto;(上下为0,左右自适应)会解决元素的居中问题(auto 自适应... [阅读全文]
  • 解析什么是绝对定位,相对定位与浮动

    在理解定位之前,先说一个概念,文档普通流,就是元素标签正常在HTML里的顺序,块级元素从上至下排列,行内元素从左到右排列。 绝对定位 绝对定位:ab... [阅读全文]
  • parcel打包报错:$isnotdefined问题怎么解决?

    parcel打包报错:$isnotdefined问题怎么解决? 目前的解决办法是引入cdn <script src="... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com