简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial H5 > teks badan

html5如何实现图片转圈的动画效果

不言
Lepaskan： 2018-06-11 17:50:17
asal
4175 orang telah melayarinya

这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

1.先瞧瞧效果：

这里写图片描述 

2.代码是这样的：

<img src="images/circle.png" alt="" id="circle"/>
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }
Salin selepas log masuk

用到的图片是这个：（就是白色转动的那个图片）
 

这里写图片描述

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用jQuery和HTML5实现手机摇一摇的换衣特效

如何利用canvas实现按住鼠标移动绘制出轨迹

用HTML5 Canvas来绘制三角形和矩形等多边形的方法

Atas ialah kandungan terperinci html5如何实现图片转圈的动画效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
h5 转圈
sumber：php.cn
Artikel sebelumnya：如何使用jQuery和HTML5实现手机摇一摇的换衣特效 Artikel seterusnya：HTML5的本地存储IndexedDB
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh membuat pautan meliputi keseluruhan imej? Saya mahu pautan meliputi semua imej, bukan sahaja di tengah tetapi juga apabila anda menu...
daripada 2024-04-02 20:45:43
0
1
378
Simpan tag html tertentu apabila membelah rentetan Saya perlu membahagikan rentetan dengan bilangan tag tertentu (<li>,<lu>...). ...
daripada 2024-03-31 18:12:42
0
1
290
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！