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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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 方便水印和缩略图的图形类
2009/05/21 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
PHP面试题及答案二
2015/05/23 面试题
读群众路线的心得体会
2014/09/03 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
参观邀请函范文
2015/02/02 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers