zoukankan      html  css  js  c++  java
  • 图片缩小右移旋转

            图片在缩小右移的同时旋转720度效果图

     1     <style>
     2         body{
     3             position: relative;
     4         }
     5         #box img{
     6             width: 300px;
     7             position: absolute;
     8             height: 300px;
     9             background: #f88e11;
    10             -webkit-transform-origin: center center;
    11             -moz-transform-origin: center center;
    12             -ms-transform-origin: center center;
    13             -o-transform-origin: center center;
    14             transform-origin: center center;
    15             /*border-radius: 50%;*/
    16             /*animation: smaller 5s linear infinite;*/
    17             -webkit-animation:smaller 3s linear infinite;
    18             -o-animation:smaller 3s linear infinite;
    19             animation:smaller 3s linear infinite;
    20         }
    21         @keyframes smaller{
    22             0%{
    23                 left: 0px;
    24                 top: 100px;
    25                 width: 480px;
    26                 height: 300px;
    27                 -webkit-transform: rotate(0deg);
    28                 -moz-transform: rotate(0deg);
    29                 -ms-transform: rotate(0deg);
    30                 -o-transform: rotate(0deg);
    31                 transform: rotate(0deg);
    32             }
    33           
    34             100%{
    35                 left: 700px;
    36                 top: 0;
    37                 width: 0px;
    38                 height: 0;
    39                 -webkit-transform: rotate(720deg);
    40                 -moz-transform: rotate(720deg);
    41                 -ms-transform: rotate(720deg);
    42                 -o-transform: rotate(720deg);
    43                 transform: rotate(720deg);
    44             }
    45         }
    46     </style>
    1 <div id="box"><img src="1.jpg" alt="图片"></div>

    参考图:

    1.jpg

  • 相关阅读:
    C#几个经常用到的字符串的截取
    写入Log错误日志
    AES 加密与解密
    支付宝小额免密支付和代扣区别:原来如此
    Sql server --触发器
    yum、ip、等命令无法不全子命令解决
    3、VNC
    6、DHCP
    2、OpenSsh
    VIM的使用
  • 原文地址:https://www.cnblogs.com/landen/p/7054975.html
Copyright © 2011-2022 走看看