zoukankan      html  css  js  c++  java
  • 用CSS3动画 animation实现图片旋转

      利用animation的动画过渡效果制作一个图片旋转的动画。

      随便取了一个图片素材

      

          HTML代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>旋转</title>
        <link rel="stylesheet" href="../CSS/xuanzhuan.css">
    </head>
    <body>
        <div></div>
    </body>
    </html>

      CSS代码:

      

    body
    {
        margin: 0;
        padding: 0;
    }
    div
    {
        width: 50px;
        height: 25px;
        margin: 100px auto;
        padding: 150px;
        background: url("../IMG/001.jpg") no-repeat;
        position: relative;
        animation:myfirst 1s infinite ;
    }
    @keyframes myfirst
    {
        100%{width: 300px;height: 150px;transform: rotate(360deg);}
    }
    

      动画效果:

    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    Merge Two Sorted Lists
    4Sum
    Letter Combinations of a Phone Number
    3Sum Closest
    3Sum
    Longest Common Prefix
    Roman to Integer
    Integer to Roman
    Container With Most Water
    Regular Expression Matching
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/10949191.html
Copyright © 2011-2022 走看看