您的位置：首页 > Web前端 > CSS

关于css旋转动画效果的简单实现

2016-08-19 11:09 696 查看

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

<!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>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 旋转动画

相关文章推荐

新的分享

章节导航