纯CSS3创意loading文字特效

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

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

官方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-09-30 15:44:04

纯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实现云雾缭绕动