利用CSS3实现头像旋转效果实例代码

高洛峰

Lepaskan： 2017-03-15 09:07:01

asal

1588 orang telah melayarinya

本篇文章主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

鼠标未放上效果：

利用CSS3实现头像旋转效果实例代码

鼠标放上之后旋转效果：

利用CSS3实现头像旋转效果实例代码

transition: all 2.0s;表示所有的属性变换在2秒内完成；

transform: rotate(360deg);表示图片旋转360度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <img src="img/03.jpg" />
    </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci 利用CSS3实现头像旋转效果实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css3 旋转动画

sumber：php.cn

Artikel sebelumnya：详解使用CSS背景图坐标定位详解及负数技巧 Artikel seterusnya：利用React加CSS3实现微信拆红包动画效果实例（代码）

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