zoukankan      html  css  js  c++  java
  • 简单旋转特效的实现

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

  • 相关阅读:
    0806 c#总复习
    0804 递归
    0808 html基础
    0803结构体,枚举类型
    0801out传值
    0731函数
    0730特殊集合
    0728多维数组,ArrayList集合
    js 获取url链接的任意参数
    jq dom操作
  • 原文地址:https://www.cnblogs.com/binarysheep/p/4290510.html
Copyright © 2011-2022 走看看