zoukankan      html  css  js  c++  java
  • CSS3绘制弹球动画效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }

    .box{
    400px;
    height: 400px;
    border: 1px solid #ccc;
    margin:30px auto;
    position: relative;
    }
    /*绘制球*/
    .box .ball{
    140px;
    height: 140px;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    left: 50%;
    background:-webkit-linear-gradient(top,#fff, #999);/*渐变色*/
    box-shadow: inset 0 0 30px #999,inset 0 -15px 70px #999;/* 阴影*/
    margin-left: -70px;
    -webkit-animation: jump 2s ease-in-out infinite;/*链接球动画*/
    z-index: 1;
    }
    /*利用伪类加强球的动画效果*/
    .box .ball:after{
    content: "";
    display: block;
    70px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top:10px;
    left: 50%;
    margin-left: -35px;
    background: -webkit-linear-gradient(#fff,#ccc);
    }
    /*绘制阴影*/
    .shadow{
    80px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    background: rgba(20,20,20,.1);
    box-shadow: 0 0 25px 20px rgba(20,20,20,.1);
    transform: scaleY(.3);
    -webkit-animation: shrink 2s ease-in-out infinite; /*链接阴影动画*/
    }
    /*球的动画*/
    @-webkit-keyframes jump{
    0%{
    top:0;
    -webkit-animation-timing-function:ease-in ;
    }
    65%{
    top:240px;
    height: 140px;
    }
    75%{
    height:120px;
    }
    100%{
    top:0;
    height: 140px;
    }
    }
    /*阴影的动画*/
    @-webkit-keyframes shrink{
    0%{
    90px;
    height: 60px;
    -webkit-animation-timing-function: ease-in;
    }
    65%{
    10px;
    height: 5px;
    margin-left: -5px;
    background: rgba(20,20,20,.3);
    box-shadow: 0 0 25px 20px rgba(20,20,20,.3);
    }

    100%{
    90px;
    height:60px;
    background: rgba(20,20,20,.1);
    box-shadow: 0 0 25px 20px rgba(20,20,20,.1);
    }
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="ball"></div>
    <div class="shadow">

    </div>

    </div>
    </body>
    </html>

  • 相关阅读:
    5.5 使用Hystrix实现断路器
    第5章 使用Spring Cloud和Netflix Hystrix的客户端弹性模式
    4.4 通过Spring Eureka注册服务
    MT【138】对称乎?
    MT【137】多少个?
    MT【136】一道三次函数的最佳逼近问题
    MT【135】条件线性化
    MT【134】待定系数
    MT【133】磨刀不误砍柴工
    MT【132】倒序相加因式分解
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6135215.html
Copyright © 2011-2022 走看看