zoukankan      html  css  js  c++  java
  • Css小动画

    html页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>css动画</title>
    <link rel="stylesheet" type="text/css" href="css动画.css">
    </head>
    <body>
    <div id="d1"></div>
    </body>
    </html>

    Css代码:

    *{
    padding: 0px;
    margin:0px;
    }
    #d1{
    200px;
    height: 200px;
    background-color: #E47373;
    position: absolute;
    box-shadow: 2px;

    transform:translate(30px,30px);
    transform:skew(-30deg,20deg);
    /*全部平滑过渡一秒匀速*/
    transition: all 1s linear;
    background-color: #84AE86;
    border-radius: 100%;
    animation: donghua 10s 1 linear;
    /*兼容性处理
    -ms-transform:;
    -o-transform:;
    -moz-transform:;
    -webkit-transform:;*/
    }
    @keyframes donghua{
    0%{
    top: 10px;
    left: 100px;
    }
    25%{
    top: 100px;
    right: 20px;
    }
    50%{
    top: 300px;
    left: 300px;
    }
    75%{
    top: 10px;
    right: 100px;
    }
    100%{
    top: 300px;
    left: 400px;
    }
    }

    做Web前端的代码猴
  • 相关阅读:
    Linq To Sql 大全
    lambda表达式学习
    一步一步学Linq to sql系列文章
    MVC 学习
    Guava环境设置
    ANT简介
    Quartz特点
    XStream环境设置
    log4j配置
    类是什么?
  • 原文地址:https://www.cnblogs.com/wang-bo/p/6855539.html
Copyright © 2011-2022 走看看