CSS3动画:5种预载动画效果实例


Posted in HTML / CSS onApril 05, 2017

实现如图所示的动画效果:

CSS3动画:5种预载动画效果实例

预载动画一:双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。
 

实现如图所示:

CSS3动画:5种预载动画效果实例

html代码:

<body style="background: #ffb83c;">
    <div id="preloader-1">
        <span></span>
        <span></span>
    </div>
</body>

css代码:

#preloader-1{
    position: relative;
}
#preloader-1 span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}
}

预载动画二:交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。
 

效果:

CSS3动画:5种预载动画效果实例

html代码:

<body style="background: #4ad3b4;">
    <div id="preloader-2">
        <span></span>
        <span></span>
    </div>
</body>

css代码:

#preloader-2{
    position: relative;
}
#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

预载动画三:旋转圈

效果:

CSS3动画:5种预载动画效果实例

html代码:

 

<body style="background: #ab69d9;">
    <div id="preloader-3">
        <span></span>
    </div>
</body>

css代码:

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}
#preloader-3 span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:-4px;
    left:-4px;
    animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

预载动画四:跳动圈

这是一种墨西哥波浪纹的动画效果,通过设置不同圆圈之间的延迟参数来实现。
 

效果:

CSS3动画:5种预载动画效果实例

html代码:

<body style="background: #c1d64a;">
    <div id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css代码:

#preloader-4{
    position: relative;
}
#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

预载动画五:雷达圈

一种雷达辐射效果,给3个span elements设置相同的淡入淡出效果,再予每个稍微延迟下即可实现。
 

效果:

CSS3动画:5种预载动画效果实例

html代码:

<body style="background: #f9553f;">
    <div id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css代码:

#preloader-5{
    position: relative;
}
#preloader-5 span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
    animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
    animation-delay: 1.33s;
}

@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3实现图片无间断轮播效果
Aug 25 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 #HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 #HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 #HTML / CSS
CSS3制作hover下划线动画
Mar 27 #HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 #HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
You might like
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
package.json文件配置详解
2017/06/15 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python实现选择排序
2017/06/04 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python实现的特征提取操作示例
2018/12/03 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
秋季运动会稿件
2014/01/30 职场文书
学生安全教育材料
2014/02/14 职场文书
实习班主任自我评价
2015/03/11 职场文书
人事聘任通知
2015/04/21 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android