html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构思新颖,效果非常的酷。
安装
可以通过bower来按钮这个loading动画特效:
bower install loaders.css
使用方法
使用这个loading加载动画特效的时候,建议将效果中所需要的HTML元素包裹在一个容器中,并将包裹容器的显示设置为:display:flex,下面以“吃豆子”加载动画为例:
外围div.loader是包裹元素,它的显示要设置为:display:flex。
CSS动画
5个空的div中,第一个使用div:first-of-type选择器来选择并将其制作为吃豆人(pacman),余下的4个div分别使用nth-child选择器来选择并制作为“豆子”。最后使用CSS3 keyframes动画将“豆子”运动起来:
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
@keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
.pacman {
position: relative; }
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s 0.25s infinite linear;
animation: pacman-balls 1s 0.25s infinite linear; }
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s 0.5s infinite linear;
animation: pacman-balls 1s 0.5s infinite linear; }
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0.75s infinite linear;
animation: pacman-balls 1s 0.75s infinite linear; }
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
}
.pacman > div:nth-child(2), .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5) {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
-ms-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 100px;
}
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效相关推荐
- html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
- 7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
- html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
- 纯css3可爱的Loading加载动画特效
这个是一款可爱的loading动画,觉得好看的小伙伴一定要试试哦! html代码 <div class="loadster"><div class="l ...
- 【web素材】09—150款+炫酷的CSS3 loading加载动画,总有一款适合你
整理 | 杨小爱 我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- 150款+炫酷的CSS3 loading加载动画,总有一款适合你
是不是非常有趣? 最后,附上150款+CSS3 loading加载动画的下载地址: 下载地址: https://pan.baidu.com/s/1upupoPpI0KDrK1lk_m4MmA 提取码: ...
- html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示 下载资源: 28 次 下载资源 下载积分: 20 积分 js代码 var ...
- 超酷的 CSS3 loading 预加载动画特效
给大家介绍一款超酷CSS3 loading预加载动画特效. 该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成. HTML结构 4种loading预加载动画 ...
最新文章
- 生成pfx文件需要在服务器上执行,PEM文件和private.key文件生成IIS服务器所需的pfx文件(配置SSL用)...
- BZOJ 4386 Luogu P3597 [POI2015]Wycieczki (矩阵乘法)
- Oracle --JOB
- 从零开始学前端:定位 --- 今天你学习了吗?(CSS:Day17)
- idea overlays文件夹_Intellij IDEA 文件修改提示星号
- java 之 单例模式(大话设计模式)
- bzoj 4094: [Usaco2013 Dec]Optimal Milking
- 面试题之请描述一下Java类加载过程
- FYI| Free online events
- Win10 20H1使用第三方应用重命名虚拟桌面
- mysql触发器——NEW与OLD aes_encrypt AES_DECRYPT
- 月均GMV超1500万,“组合营销”如何成为快手品牌出圈利器?
- depth, bedgraph, bigwig之间的联系与区别
- 【VMware】在VMware ESXi 6.7中创建虚拟机
- Java并发编程(一)—— FutureTask超详细教程
- 新加坡国际学校IB成绩亮眼,全球40%满分考生来自新加坡
- 【Multisim仿真】全波整流电路仿真
- Unity热更新系列之一: bundle打包和打包策略
- JDK1.6中文版下载
- python + selenium实现12306全自动买票
热门文章
- Spring字段依赖注入示例
- 使用Spring Boot 2.0的Spring Security:保护端点
- JavaFX技巧30:带有DropShadow的ScrollPane
- OAuth2,JWT,Open-ID Connect和其他令人困惑的事物
- glassfish hk2_使用GlassFish 3.1.2.2和Primefaces 3.4的JDBC领域和基于表单的身份验证
- 红帽JBoss企业应用平台7.0 ALPHA发布了!
- openshift_云上的播放框架变得简单:Openshift模块
- 从基于Maven的Web应用程序获取版本字符串
- JavaEE还是Spring? 都不行! 我们呼吁新的竞争者!
- Gradle入门:创建Web应用程序项目