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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
React实现全选功能
2020/08/25 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python抽象类的新写法
2015/06/18 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Python之多进程与多线程的使用
2021/02/23 Python
竞选演讲稿范文
2013/12/28 职场文书
班风口号
2014/06/18 职场文书
名人演讲稿范文
2014/09/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
军事博物馆观后感
2015/06/05 职场文书
歌剧魅影观后感
2015/06/05 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书