数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

基于CSS3实现的几个小loading效果

来源:脚本之家  责任编辑:小易  

CSS3实现的几个小loading效果

昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家

    1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading

 

     这个是效果图片

    下面我直接把代码放上来,大家需要的可以直接拉走

               核心思想:(旋转,以及overflow:hidden属性),可以把代码中的overflow属性注释掉,保准你看一眼明白了,看不明白回来找我,我对你负责

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        body {
            background-color: black
        }
        .box {
            margin: 200px auto;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: rgb(0, 174, 255);
            position: relative;
            overflow: hidden;
            border: 1px solid rgb(0, 174, 255);
            border-top: none;
        }
        .a {
            width: 200px;
            height: 200px;
           background: black;
            position: absolute;
            left: -80px;
            top: -180px;
            border-radius: 80px;
            animation: xuanzhuan 5s linear infinite;
            z-index: 2
        }
        @keyframes xuanzhuan{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html> 

  2.普通的圆形loading    这个也很简单  没啥好说的,直接上代码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0}
    li{list-style: none}
    body,html{
        background-color: black;
    }
    ul{
        height: 40px;
        width: 200px;
        margin: 50px auto;
    }
    ul>li{
        float: left;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: white;
        margin-left: 10px;
        animation: move 2s infinite alternate;
        transform: scale(0.5)
    }
    ul>li:nth-of-type(2){
        animation-delay: 0.5s;
    }
    ul>li:nth-of-type(3){
        animation-delay:1s;
    }
    @keyframes move{
        0%{transform: scale(0.5);opacity: 0.5}
        100%{transform: scale(1);opacity: 1;}
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

  3.圆形转圈loading

  思想(把小圆用定位排成圆形,再给每个上添加动画,用delay控制延迟事件即可)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            width: 50px;
            height: 50px;
            position: absolute;
            margin: 100px;
        }
        .d1 p{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: red;
            position: absolute;
            animation: dong 1.5s linear infinite;
        }
        .d1 p:nth-child(1){
            top: 0;
            left: 0;
        }
        .d1 p:nth-child(2){
            top: 0;
            right: 0;
        }
        .d1 p:nth-child(3){
            right: 0;
            bottom: 0;
        }
        .d1 p:nth-child(4){
            bottom: 0;
            left: 0;
        }
        .d1:nth-of-type(2){
            transform: rotate(45deg);
        }
        @keyframes dong{
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(0);
            }
        }
        .d1:nth-of-type(1) p:nth-of-type(1){
            /*负值:动画直接开始,但跳过前...秒动画*/
            animation-delay: -0.1s;
        }
        .d1:nth-of-type(2) p:nth-of-type(1){
            animation-delay: -0.3s;
        }
        .d1:nth-of-type(1) p:nth-of-type(2){
            animation-delay: -0.5s;
        }
        .d1:nth-of-type(2) p:nth-of-type(2){
            animation-delay: -0.7s;
        }
        .d1:nth-of-type(1) p:nth-of-type(3){
            animation-delay: -0.9s;
        }
        .d1:nth-of-type(2) p:nth-of-type(3){
            animation-delay: -1.1s;
        }
        .d1:nth-of-type(1) p:nth-of-type(4){
            animation-delay: -1.3s;
        }
        .d1:nth-of-type(2) p:nth-of-type(4){
            animation-delay: -1.5s;
        }
    </style>
    <body>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>

    4.交叉效果

    这个稍微复杂一点,其实只要捋明白思路,也挺简单的(PS:大家可以把动画挨个取消试试,你就会发现好像并不是很难)

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
</head>
<body>
    <style>
        body {
            background-color: #F5F5F5;
            padding: 100px 120px;
        }
        .box {
            margin-left: 500px;
            display: block;
            width: 64px;
            height: 64px;
            transform-origin: 16px 16px;
            /* 旋转 */
            animation: xuanzhuan 5s infinite;
        }
        /* 平移 */
        .ping {
            animation: pingyi 2.5s infinite;
            position: absolute;
        }
       .hang {
            width: 64px;
            height: 24px;
            position: absolute;
        }
        .hang:nth-child(0) {
            transform: rotate(0deg);
        }
        .hang:nth-child(1) {
            transform: rotate(90deg);
        }
        .hang:nth-child(2) {
            transform: rotate(180deg);
        }
        .hang:nth-child(3) {
            transform: rotate(270deg);
        }
        /* 第一个小珠子 */
       .ping:nth-child(1) {
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            margin-top: -4px;
            margin-left: -4px;
            border-radius: 4px;
            animation-delay: -0.3s;
        }
        /* 第二个小珠子 */
        .ping:nth-child(2) {
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            border-radius: 8px;
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
         /* 第三个小珠子 */    
        .ping:nth-child(3) {
            width: 24px;
            height: 24px;
            top: 50%;
            left: 50%;
            margin-top: -12px;
            margin-left: -12px;
            border-radius: 12px;
            animation-delay: -0.9s;
        }
        .blue {
            background-color: #1f4e5a;
        }
        .red {
            background-color: #ff5955;
        }
        .yellow {
            background-color: #ffb265;
        }
        .green {
            background-color: #00a691;
        }
        @keyframes xuanzhuan {
            0% { transform: rotate(0deg);}
            100% { transform: rotate(360deg);}
     }
        @keyframes pingyi {
            0% {transform: translateX(0);}
             25% { transform: translateX(-64px); }
            75% { transform: translateX(32px);} 
            100% {transform: translateX(0);}
        }
    </style>
        <div class="box">
            <div class="hang">
                <div class="ping blue"></div>
                <div class="ping blue"></div>
                <div class="ping blue"></div>
            </div>
            <div class="hang">
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
            </div>
            <div class="hang">
                <div class="ping red"></div>
                <div class="ping red"></div>
                <div class="ping red"></div>
            </div>
            <div class="hang">
                <div class="ping green"></div>
                <div class="ping green"></div>
                <div class="ping green"></div>
            </div>
        </div>
</body>
</html>

   5.圆形正方形切换小loading

  这个是真的简单!!!!!

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
<title>loading-04</title>
</head>
<body>
<style>
    body{ 
        padding: 80px 100px;
    }
    .csshub-loading-icon{
        padding:10px;
        width:10px;
        height:10px;
        border-top:20px solid #ED5548; 
        border-right:20px solid #599CD3;
        border-bottom: 20px solid #5CBD5E;
        border-left:20px solid #FDD901;
        background:transparent;
        animation: csshub-rotate-right-round 1.2s ease-in-out infinite  alternate ;
    }
    @keyframes csshub-rotate-right-round
        {
        0% { transform: rotate(0deg);}
        50% {transform: rotate(180deg); }
        100% {transform: rotate(360deg);border-radius:50%;}
    }
</style>
    <div class="csshub-loading-icon"></div>
</body>
</html>

我没做兼容,要是再某些浏览器不能运行,加一下浏览器前缀就好啦!
 

以上所述是小编给大家介绍的CSS3实现的几个小loading效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


  • 本文相关:
  • 纯css3实现的多层圆环loading加载动画特效源码
  • css3如何绘制一个圆圆的loading转圈动画
  • css3 animation制作loading白色圆点滑过加载动画特效源码
  • 纯css3实现的红酒碰杯loading动画效果源码
  • css3 svg实现的三角形图标变换loading加载动画特效源码
  • 15种html5和css3炫酷彩色loading加载动画特效
  • 详解纯css3制作的20种loading动效
  • 11种css3波形loading加载动画特效
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved