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教程(5):网页背景图片
Apr 02 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 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操作XML作为数据库的类
2010/12/19 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
js module大战
2019/04/19 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Djang中静态文件配置方法
2015/07/30 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python类中self参数用法详解
2020/02/13 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
初级党校心得体会
2014/09/11 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书