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制作炫酷的自定义发光文字
Mar 28 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
限制复选框的最大可选数
2006/07/01 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python实现批量压缩图片
2018/01/25 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
小学班主任评语大全
2014/04/23 职场文书
体育比赛口号
2014/06/09 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
个人委托书怎么写
2014/09/17 职场文书
学生检讨书如何写
2014/10/30 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
食品安全主题班会
2015/08/13 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python