简单旋转特效的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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

posted @   BinarySheep  阅读(299)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 从零开始开发一个 MCP Server！
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
点击右上角即可分享
微信分享提示