CSS3实现的文字弹出特效


Posted in HTML / CSS onApril 16, 2021

实现代码

html

<div>三水点靠木</div> 
<div> 
  <span>https://www.3water.com</span>
</div>


<p>a css3 animation demo</p>

css3

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

body {
  text-align:center;
  background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color:#555;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  padding-top:40vh;
  height:100vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

div:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

div:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}

以上就是CSS3实现的文字弹出特效的详细内容,更多关于CSS3 文字弹出特效的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
Html5新增了哪些功能
Apr 16 #HTML / CSS
Html5调用企业微信的实现
Apr 16 #HTML / CSS
CSS3 制作的图片滚动效果
CSS3常见动画的实现方式
Apr 14 #HTML / CSS
CSS3实现的水平标题菜单
Apr 14 #HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
详解Html5项目适配系统深色模式方案总结
Apr 14 #HTML / CSS
You might like
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
js 函数性能比较方法
2020/08/24 Javascript
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
python psutil监控进程实例
2019/12/17 Python
Python如何生成xml文件
2020/06/04 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
新大陆软件面试题
2016/11/24 面试题
一道输出判断型Java面试题
2014/10/01 面试题
小学生获奖感言范文
2014/02/02 职场文书
新闻编辑求职信
2014/04/09 职场文书
采购员岗位职责
2015/02/03 职场文书
龙猫观后感
2015/06/09 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
python脚本框架webpy模板控制结构
2021/11/20 Python