css文字动画(自动换文字)
html:
<div class="content">
<div class="content__container">
<p class="content__container__text">
酒之
</p>
<ul class="content__container__list">
<li class="content__container__list__item">历史</li>
<li class="content__container__list__item">常识</li>
<li class="content__container__list__item">文化</li>
<li class="content__container__list__item">工艺</li>
<li class="content__container__list__item">典故</li>
</ul>
</div>
</div>
css:
body {
width: 100%;
height: 100%;
position: fixed;
background-color: #34495e;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:after,
.content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
@keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes change {
0%,
100% {
transform: translate3d(0, 0, 0);
}
25%{
transform: translate3d(0, -25%, 0);
}
50% {
transform: translate3d(0, -50%, 0);
}
75% {
transform: translate3d(0, -75%, 0);
}
}
css文字动画(自动换文字)的更多相关文章
- 奇思妙想 CSS 文字动画
之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- 使用veloticy-ui生成文字动画
前言 最近要实现一个类似文字波浪线的效果,使用了velocity-ui这个动画库,第一个感觉就是使用简单,代码量少,性能优异,在此简单介绍一下使用方法,并实现一个看上去不错的动画.具体使用方法可以点击 ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- Swift: 打造滑动解锁文字动画
原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- javascript 文字大小自动适应文本框 (文字大小自动调整)
javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...
- CSS环绕球体的旋转文字-3D效果
代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
随机推荐
- 最简单的方法是使用标准的 Linux GUI 程序之一: i-nex 收集硬件信息,并且类似于 Windows 下流行的 CPU-Z 的显示。 HardInfo 显示硬件具体信息,甚至包括一组八个的流行的性能基准程序,你可以用它们评估你的系统性能。 KInfoCenter 和 Lshw 也能够显示硬件的详细信息,并且可以从许多软件仓库中获取。
最简单的方法是使用标准的 Linux GUI 程序之一: i-nex 收集硬件信息,并且类似于 Windows 下流行的 CPU-Z 的显示. HardInfo 显示硬件具体信息,甚至包括一组八个的流 ...
- nosql数据库之Redis持久化、备份和主从配置
一.持久化方式 Redis提供了两种数据备份的方式,一种是RDB,另外一种是AOF. RDB AOF 开启/关闭 开启:默认开启:关闭:把配置文件中所有的save注释就是关闭了 开启:在配置文件中 ...
- SPI总线 通俗易懂讲解——(转载)
SPI总线 MOTOROLA公司的SPI总线的基本信号线为3根传输线,即SI.SO.SCK.传输的速率由时钟信号SCK决定,SI为数据输入.SO为数据输出.采用SPI总线的系统如图8-27所示,它包含 ...
- Spring IoC容器 XML 配置与加载
IoC 容器 XML 配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...
- idea 使用Springboot 编译报错
报错信息如下 Argument for @NotNull parameter 'url' of org/jetbrains/jps/model/impl/JpsUrlListImpl.addUrl m ...
- Linux(CentOS 7) 安全加固之非业务端口服务关闭 postfix port 25
目录 关闭TCP 25 端口对应的服务 1. 确认对应端口的进程 2. 查找与关闭对应服务 3. 确认结果,端口已关闭 关闭TCP 25 端口对应的服务 [0 root@Qvps /root] #ca ...
- 回顾Servlet
1.新建一个Maven工程当做父工程!pom依赖! <!-- 依赖 --> <dependencies> <dependency> <groupId>j ...
- pika详解(三)SelectConnection及其他Connection
pika详解(三)SelectConnection及其他Connection 本文链接:https://blog.csdn.net/comprel/article/details/94661147 ...
- MLIR中间表示和编译器框架
MLIR中间表示和编译器框架 TensorFlow生态系统包含许多在软件和硬件堆栈的多个级别上运行的编译器和优化器.作为TensorFlow的日常用户,使用不同类型的硬件(GPU,TPU,移动设备)时 ...
- GPU自动调度卷积层
GPU自动调度卷积层 本文对GPU使用自动调度程序. 与依靠手动模板定义搜索空间的基于模板的autotvm不同,自动调度程序不需要任何模板.用户只需要编写计算声明,无需任何调度命令或模板.自动调度程序 ...