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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
JS event使用方法详解
2008/04/28 Javascript
Javascript 学习书 推荐
2009/06/13 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
python映射列表实例分析
2015/01/26 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Python常用断言函数实例汇总
2020/11/30 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
建筑专业自荐信
2013/10/18 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
公司办公室岗位职责
2014/03/19 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2015入党个人自传范文
2015/06/26 职场文书
工作简报格式范文
2015/07/21 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server