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

  • 相关阅读:
    Windows的本地时间(LocalTime)、系统时间(SystemTime)、格林威治时间(UTCTime)、文件时间(FileTime)之间的转换
    VS2008驱动开发环境配置
    delete和delete[]的区别
    手动加载NT式驱动(非工具)修改注册表实现
    结构体的内存空间分配原理
    NT式驱动的卸载
    NT式驱动的安装
    struct tm>time() localtime() gmtime()
    64位驱动数字签名
    SQL Server 数据库错误修改
  • 原文地址:https://www.cnblogs.com/binarysheep/p/4290510.html
Copyright © 2011-2022 走看看