zoukankan      html  css  js  c++  java
  • CSS transition 动画入门

    代码1:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>transition动画</title>
    <style type="text/css">
    div {
      width: 200px;
      height: 200px;
      background: red; 
      transition-property:background,width;  
      transition-duration:1s;
      transition-timing-function: ease-in;  
      transition-delay:1s;
    }
    div:hover {
      width: 400px;
      background:yellow;
    }
    
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

     代码2:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Transition Animation</title>
    <style type="text/css">
    ul {
        list-style-type: none;
    }
    li{
        float:left;
        width:80px;
        height:40px;
        background-color:#CCC;
        border-right:1px solid #666;
        border-bottom:1px solid #666;
        line-height:40px;
        text-align:center;
        margin-right:10px;
        position:relative;
        transition-property:background-color,left;  
        transition-duration:1s;
        transition-timing-function: ease-in-out;
    left:0;
    } li:hover{ background-color:#900; color:white; left:15px; z-index:10; } </style> </head> <body> <ul> <li>首页</li> <li>软件下载</li> <li>联系方式</li> </ul> </body> </html>

    课后作业:

    1.复制上述代码,预览查看效果。

    2.读懂上述代码。


    附:

     linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。(匀速)
    ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))(相对于匀速,中间快,两头慢)。
    ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))(相对于匀速,开始的时候慢,之后快)。
    ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))(相对于匀速,开始时快,结束时候间慢,)。
    ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))(相对于匀速,(开始和结束都慢)两头慢)。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  • 相关阅读:
    [bbk4999] 第100集 第12章 数据移植 06
    [bbk4992] 第98集 第12章 数据移植 04
    [bbk0000] 第101集 第12章 数据移植 08 本章案例 > 使用ORACLE_DATAPUMP擎创建外部表
    PL/SQL
    [zz]Python:time.clock() vs. time.time()
    MVC简介
    ajax_get/post_两级联动
    Ajax
    JAVAUML
    类与接口的区别
  • 原文地址:https://www.cnblogs.com/exesoft/p/12982787.html
Copyright © 2011-2022 走看看