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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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
桌面中心(四)数据显示
2006/10/09 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
推荐11个实用Python库
2015/01/23 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python调用fortran模块
2016/04/08 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python进程间通信Queue实例解析
2018/01/25 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
实习教师自我鉴定
2013/12/12 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
工商局个人工作总结
2015/03/03 职场文书
门店店长岗位职责
2015/04/14 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
公司保密管理制度
2015/08/04 职场文书
九年级历史教学反思
2016/02/19 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers