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图片边框border-image的用法
Jun 30 HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 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 日志缩略名的创建函数代码
2010/05/26 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
js实现抽奖效果
2017/03/27 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python中global与nonlocal比较
2014/11/21 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python实现微信机器人的方法
2019/09/06 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
校园之声广播稿
2014/01/31 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
学习十八大宣传标语
2014/10/09 职场文书
停电调休通知
2015/04/16 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
DIY胆机必读:各国电子管评价
2022/04/06 无线电