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学习之2D转换功能详解
Dec 23 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php开启openssl的方法
2014/05/15 PHP
php常量详细解析
2015/10/27 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python处理中文标点符号大集合
2018/05/14 Python
python交易记录整合交易类详解
2019/07/03 Python
python实现同一局域网下传输图片
2020/03/20 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
如何写早恋检讨书
2014/09/10 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
周一问候语大全
2015/11/10 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android