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完美实现表头固定效果
Feb 28 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
英智兴达软件测试笔试题
2016/10/12 面试题
测试工程师职业规划书
2014/02/06 职场文书
六查六看剖析材料
2014/02/15 职场文书
绩效工资实施方案
2014/03/15 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
学校运动会简讯
2015/07/20 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
用Python创建简易网站图文教程
2021/06/11 Python