【问题标题】:How to animate image circular in css如何在css中为图像圆形动画
【发布时间】:2016-06-15 11:09:04
【问题描述】:

我想旋转图像并相应地制作动画,有人可以帮助我吗,下面是 gif 图像的链接

https://drive.google.com/file/d/0B92S5c2PO_OIeUZJU0g2dnY3S3c/view?usp=sharing

【问题讨论】:

    标签: css


    【解决方案1】:

    这是一个解决方案

    http://jsfiddle.net/aquadk/m23sadrz/

    CSS

    .image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 120px;
        margin:-60px 0 0 -60px;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    

    HTML

    <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-07
      • 2012-07-28
      • 2014-04-29
      • 1970-01-01
      相关资源
      最近更新 更多