大海案例

来源：互联网发布：ubuntu 14.04 安装编辑：程序博客网时间：2024/04/29 13:53

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3 动画</title>
   <style>
       html, body {
           height: 100%;
       }

       body {
           margin: 0;
           padding: 0;
           background-color: #0EA9B1;
       }

       section {
           height: 100%;
           position: relative;
           overflow: hidden;
       }

       .bg1, .bg2 {
           position: absolute;
           left: 0;
           /*bottom: 0;*/
           width: 100%;
       }

       .bg1 {
           bottom: 20px;
           height: 211px;
           background-image: url(./1.png);
           /*调用*/
           animation: move 1s linear infinite;
       }

       .bg2 {
           bottom: 0;
           height: 235px;
           background-image: url(./2.png);
           animation: move 1s linear infinite;
       }

       .sun {
           width: 50px;
           height: 50px;
           background-color: #FFF;
           border-radius: 25px;
           position: absolute;
           left: 200px;
           top: 100px;
       }

       .sun::before, .sun::after {
           content: '';
           display: block;
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: #FFF;
           border-radius: 25px;
       }

       .sun::before {
           animation: scale 1s infinite linear;
       }

       .sun::after {
           animation: scale 1s 0.5s infinite linear;
       }

       @keyframes scale {
           0% {
               /*transform: scale(1);
               opacity: 1;*/
           }

           100% {
               transform: scale(2);
               opacity: 0;
           }
       }

       /*动画序列*/
       @keyframes move {
           0% {
               /**/
           }

           50% {
               bottom: -20px;
           }

           100% {
               /**/
           }
       }

   </style>
</head>
<body>
   <section>
       <div class="sun"></div>
       <div class="bg1"></div>
       <div class="bg2"></div>
   </section>
</body>
</html>

阅读全文

0 0