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 相关文章推荐
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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中str_replace函数使用小结
2008/10/11 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python字符串格式化的方法(两种)
2017/09/19 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
工程项目建议书范文
2014/03/12 职场文书
《火烧云》教学反思
2014/04/12 职场文书
股权转让协议书
2014/12/07 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
mysql序号rownum行号实现方式
2022/12/24 MySQL