css旋转动画效果的简单实现示例详解

高洛峰

Lepaskan： 2017-03-03 16:55:45

asal

2382 orang telah melayarinya

我们可以通过css来做出动画效果，下面我为大家演示的是p的旋转，颜色过渡的动画

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    a{       
        text-align:center;   
        line-height:100px;   
        transition:all 2s;   
        width:100px;   
        height:100px;   
        background:pink;   
        float:left;   
        border-radius:50%;   
    }   
    a:hover{   
        transition:all 2s;   
        background:red;   
        transform-origin:50 100;   
        transform:rotate(360deg);   
        border-radius:50%;   

    }   
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<a>
    两秒旋转360   
</a>
</body>
</html>

Salin selepas log masuk

效果自己测试，很绚丽哦！

以上这篇关于css旋转动画效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多css旋转动画效果的简单实现示例详解相关文章请关注PHP中文网！

Label berkaitan：

css 旋转动画

sumber：php.cn

Artikel sebelumnya：CSS background全部汇总介绍 Artikel seterusnya：常用的css 命名规则详细解释

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