纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App，并销售到苹果应用商店中。

《HTML开发Mac OS App 视频教程》

土豆网同步更新：http://www.tudou.com/plcover/VHNh6ZopQ4E/

百度网盘同步：http://pan.baidu.com/s/1jG1Q58M

分享 [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS

官方QQ群：（申请加入，说是我推荐的）

App实践出真知 434558944

App学习交流 452180823

简要教程

这是一款非常有创意的纯CSS3 loading加载文字动画特效。该loading文字特效中，字母O的内圆会不停的放大缩小，使用这个动画效果来提示用户当前的页面或任务正在加载中。

使用方法

HTML结构

该loading文字特效的HTML结构中，不动画的文字使用<span>来制作，动画的文字使用一个三层嵌套的<div>来制作。

<div id = "cupcake" class = "box">

<span class = "letter">L</span>

<div class = "cupcakeCircle box">

<div class = "cupcakeInner box">

<div class = "cupcakeCore box"></div>

</div></div>

<span class = "letter box">A</span>

<span class = "letter box">D</span>

<span class = "letter box">I</span>

<span class = "letter box">N</span>

<span class = "letter box">G</span>

</div>

CSS样式

这个loading特效中的布局使用的是flex布局方式。IE11以下的浏览器都不支持CSS flex属性，所以布局会非常混乱。

#cupcake{

flex-direction:row;

-webkit-flex-direction:row;

-ms-flex-direction:row;

-mos-flex-direction:row;

-o-flex-direction:row;

justify-content:center;

-webkit-justify-content:center;

-ms-justify-content:center;

height:100%;

width:100%;

background-color:#FFD454;

}

.letter{

font-size:100px;

color:#222;

font-family:tahoma;

}

.box{

display: box;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.cupcakeCircle, .cupcakeInner, .cupcakeCore{

border-radius:50%;

-webkit-border-radius:50%;

-moz-border-radius:50%;

-ms-border-radius:50%;

}

.cupcake, .letter, .cupcakeCircle, .cupcakeInner, .cupcakeCore{

flex:none;

-webkit-flex:none;

-moz-flex:none;

-ms-flex:none;

-o-flex:none;

}

.letter, .cupcakeCircle{

align-self:center;

-webkit-align-self:center;

-moz-align-self:center;

-o-align-self:center;

-ms-align-self:center;

}

.cupcakeCircle{

align-items:center;

-ms-align-items:center;

justify-content:center;

-ms-justify-content:center;

height:100px;

width:100px;

background-color:#222;

}

字母的动画使用的是CSS animation来制作。动画被设置为无线循环，并使用ease-in-out的easing效果。

.cupcakeInner{

align-self:center;

-ms-align-self:center;

justify-content:center;

-ms-justify-content:center;

height:50%;

width:50%;

background-color:#FFD454;

animation-name:cupcakeAnimate;

animation-duration:500ms;

animation-direction:alternate;

animation-timing-function:ease-in-out;

animation-iteration-count:infinite;

-webkit-animation-name:cupcakeAnimate;

-webkit-animation-duration:500ms;

-webkit-animation-direction:alternate;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;

}

.cupcakeCore{

align-self:center;

-ms-align-self:center;

height:25%;

width:25%;

background-color:#222;

animation-name:coreAnimate;

animation-duration:1s;

animation-direction:alternate;

animation-timing-function:ease-in-out;

animation-iteration-count:infinite;

-webkit-animation-name:coreAnimate;

-webkit-animation-duration:1s;

-webkit-animation-direction:alternate;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;

}

@-webkit-keyframes cupcakeAnimate{

to{ height:90%; width:90%; }

}

@keyframes cupcakeAnimate{

to{ height:90%; width:90%; }

}

@-webkit-keyframes coreAnimate{

to{ height:90%; width:90%; }

}

@keyframes coreAnimate{

to{ height:90%; width:90%; }

}

时间： 2024-07-30 12:10:30

纯CSS3创意loading文字特效的相关文章

纯CSS3实现图片展示特效

本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑. 观看演示 HTML代码通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素li. CSS代码 CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化. 非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意

纯css3实现的文字亮光特效

1. [图片] 201411232307357663.jpg 2. [代码][HTML]代码 1 <span class="shiny"><span class="inner-shiny">Shiny</span> </span> 3. [代码][CSS]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

CSS3实现Loading动画特效

查看效果:http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3 loading等待加载代码 - 何问起</title> <style> @keyframes move { from { transform: translate(0,50%);

CSS3动画遮罩文字特效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3动

纯css3 transforms 3D文字翻开翻转3D开放式效果

详细内容请点击在线预览立即下载在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class="grid"> <li class="ot-letter-left"><span data-letter="C">C</span></li> <li class="ot-letter-

如何用纯 CSS 创作阶梯文字特效

效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cEQMJAK 源代码下载本地下载每日前端实战系列的全部源代码请从 github 下载: https://github.co

38.纯 CSS 创作阶梯文字特效

原文地址:https://segmentfault.com/a/1190000015107942 HTML code: <div class="container"> <p> <span>stay</span> <span>hungry</span> </p> <p> <span>hungry</span> <span>stay</span>

前端每日实战：38# 视频演示如何用纯 CSS 创作阶梯文字特效

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cEQMJAK 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示源码下载 3.纯CSS3实现云雾缭绕动