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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP实现文件上传与下载
2020/08/28 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JavaScript类库D
2010/10/24 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
python去除文件中重复的行实例
2018/06/29 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
pymongo中group by的操作方法教程
2019/03/22 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Django的性能优化实现解析
2019/07/30 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
项目考察欢迎辞
2014/01/17 职场文书
安全资金保障制度
2014/01/23 职场文书
健康教育评估方案
2014/05/25 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
考试后的感想
2015/08/07 职场文书