美文网首页
前端loading... css实现

前端loading... css实现

作者: 汪槑槑2017 | 来源:发表于2017-11-02 16:42 被阅读48次

项目里用到,虽说是小东西比较零碎,又不能用gif代替,

but没有是大前端做不到的,看了老鸟的查了些css资料才实现,

<--- HTML ----> 

<div class="loading">Loading</div>

<--  CSS -->

.loading:after {

       overflow: hidden;

      display: inline-block;

      vertical-align: bottom;

      -webkit-animation: ellipsis 2s infinite;

      -moz-animation: ellipsis 2s infinite;

       animation: ellipsis 2s infinite;

      content: "\2026"; /* ascii code for the ellipsis character */

}

@-moz-keyframes ellipsis {

from {

width: 2px;

}

to {

width: 15px;

}

}

@-moz-keyframes ellipsis {

from {

width: 2px;

}

to {

width: 15px;

}

}

@-webkit-keyframes ellipsis {

from {

width: 2px;

}

to {

width: 15px;

}

}

相关文章

  • 前端loading... css实现

    项目里用到,虽说是小东西比较零碎,又不能用gif代替, but没有是大前端做不到的,看了老鸟的查了些css资料才实...

  • web前端特效演示合集

    前端特效01:使用纯CSS实现书籍3D翻页效果 前端特效02:使用纯CSS实现动态太极 前端特效03:HTML5画...

  • 4 jQuery04 动画

    1、前端领域实现动画效果的技术:(1).css transition; (2).css keyframes; (3...

  • web 相关知识了解

    前端是做什么的? 前端工程师主要是利用HTML、CSS、JavaScript等技术将设计稿实现成网站产品,实现交互...

  • 实现动画的6种方案

    通常,前端实现动画的方案主要有6种:CSS3 transition、CSS3 animation、Canvas动画...

  • UIImageView.animationImages

    UIImageView的animationImages属性是一个UIImage的数组。可以实现简单的loading...

  • css实现水平垂直居中的方法总结

    css实现水平垂直居中的方法总结 实现水平垂直居中你有多少种方法?这是前端面试必考题啊!-=- 这段时间公司招前端...

  • web前端中的遮罩蒙版

    在前端开发中,有一些效果需要实现遮罩蒙版的效果,有几种方案,记录一下 CSS实现 css 中mask属性,最早是出...

  • 什么叫Web前端?web前端HTML5学习方法分享

    web前端开发主要是通过html,css,js,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。...

  • css - 收藏集 - 掘金

    CSS 绝对底部 - 前端 - 掘金来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面...

网友评论

      本文标题:前端loading... css实现

      本文链接:https://www.haomeiwen.com/subject/keqapxtx.html