码迷,mamicode.com
首页 > 其他好文 > 详细

简单旋转特效的实现

时间:2015-02-13 18:17:23      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/styleTest.css">
</head>
<body>
<div class="toptitle">
    <a class="spliteTitle " href="#">首页</a>
    <a class="spliteTitle" href="#">HTML基础</a>
    <a class="spliteTitle" href="#">HTML入门</a>
    <a class="spliteTitle" href="#">HTML5</a>
    <a class="spliteTitle" href="#">CSS基础</a>
    <a class="spliteTitle" href="#">CSS入门</a>
    <a class="spliteTitle" href="#">CSS3</a>
    <a class="spliteTitle" href="#">CSS Hack</a>
    <a class="spliteTitle" href="#">CSS工具</a>
    <a class="spliteTitle" href="#">PS教程</a>
    <a class="spliteTitle" href="#">WEB标准</a>
</div>
</body>
</html>

 

*{margin: 0;padding: 0;}
body{background: #f7f8d5;}
.toptitle{
    display: inline-block;
    width: 900px;
    height: 50px;
    background-color: #f9f9ff;
    margin: 0 90px;
}
.toptitle  .spliteTitle{
    display: inline-block;
    margin-top: 10px;
    margin-left: 3px;
    padding: 5px 5px 5px 5px ;
    background-color: #639b98;
    text-decoration:none;
    color: #fff;
    /**设置需要旋转的速度**/
    -moz-transition:ease-out 0.2s;
    -o-transition:ease-out 0.2s;
    -webkit-transition:ease-out 0.2s;
    transition:ease-out 0.2s;
}
/**设置需要旋转的元素**/
.toptitle  .spliteTitle:hover
{
    /**180°旋转**/
    transform:rotate(180deg) scale(1.2);
    -moz-transform:rotate(180deg) scale(1.2);
    -o-transform:rotate(180deg) scale(1.2);
    -webkit-transform:rotate(180deg) scale(1.2);
    background-color: #9b5850;
}

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
语法:transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

http://www.w3school.com.cn/cssref/pr_transition.asp

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

http://www.w3school.com.cn/cssref/pr_transform.asp

技术分享

简单旋转特效的实现

标签:

原文地址:http://www.cnblogs.com/binarysheep/p/4290510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!