No.1 - 製做一個簡單的菜單動畫效果---百度IFE CSS3新特性，兼容性，兼容方法總結

時間 2019-12-12

標籤 no.1 製做一個簡單菜單動畫效果百度 ife css3 css 特性兼容性兼容方法總結欄目 CSS 简体版

原文原文鏈接

最近比較閒，在家作點訓練javascript

http://ife.baidu.com/course/detail/id/18?t=1527144851578#learncss

CSS3新特性，兼容性，兼容方法總結

https://www.cnblogs.com/jesse131/p/5441199.htmlhtml

課程概述

做業提交截止時間：09-01前端

關於此課程

此課程按照簡單到難的順序一共有八個任務，由淺入深的帶你們瞭解 Web 動效落地方法。完成這八道題，你會掌握以下技能：java

熟練掌握 CSS transition 、transform 、animation 的用法 ;
怎麼從一份動效標註去 100% 還原 CSS 動畫 ;
學會使用經常使用的前端動畫開源庫。

課程適用人羣

你須要具有必定 HTML、CSS 開發基礎；
你對動效設計概念有必定的瞭解，既知道怎麼作，也知道爲何要這麼作；
你須要具有熟練使用 git|github 的能力。

做者有話說

在後續的一段時間，我會陸續在個人知乎專欄公佈題目的寫法和詳細分析。https://zhuanlan.zhihu.com/uxelement
建議你在看個人方法以前，儘可能先本身先實現，個人方法不必定比你的好。也歡迎你在完成課程的閒暇，貢獻本身的學習筆記。畢竟總結沉澱纔是最好的學習方法。
若是你對本課程有任何意見，或者你跟我同樣是個愛貓人士的話，歡迎來個人知乎勾搭~咱們能夠聊聊技術（養貓）心得：）

下面進入本學院第一個任務

任務目的

熟悉 CSS3 過渡子屬性
經過 JavaScript 觸發過渡效果
理解語義化，合理地使用 HTML 標籤來構建頁面

任務描述

經過 CSS transition 實現以下效果：
視頻demo
每次點擊【切換樣式】按鈕的時候，出現視頻 demo 所示的動畫效果。
學有餘力的同窗能夠研究一下，如何經過修改貝塞爾曲線，讓這個動效更貼近天然。

任務注意事項

CSS transition 的各項子屬性（時間曲線）等詳細值能夠自由定義；
注意瀏覽器中的兼容性；
HTML 及 CSS 代碼結構清晰、規範；
代碼中含有必要的註釋；

在線學習參考資料

1：行內元素水平居中 text-align:center;css3

2：button樣式git

    button{
         padding: 0;
          border: none;
         font: inherit;
         color: inherit;
          background-color: transparent;
          /* show a hand cursor on hover; some argue that we
          should keep the default arrow cursor for buttons */
          cursor: pointer;
    }
    .btn{
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius:4px;
        padding: 0.5em 1em;
        margin-top: 5px;
    }

3：transition4個屬性github

transition: width 0.5s ease-out 1s;

4:Cannot set property 'width' of undefined?瀏覽器

這個問題不是CSS的問題，而是一個純javascript的問題。
你的css寫得沒錯，問題出在Javascript當中的 getElementsByClassName("aa")，這個方法獲得的是一個由class="aa"的全部元素組成的集合，而不是單個元素；

集合是沒有display屬性的，集合中的元素纔有display屬性。當你試圖作 集合.style.display的時候，天然會報錯。

因此你這個問題的解決方案應該是：遍歷集合中全部的元素，而後給每一個元素都加上display="none"的屬性。示例代碼以下：


window.onload = function (){
 divset = document.getElementsByClassName("aa");
 for (var i = 0; i<divset.length;i++) {
   divset[i].style.display="none";
 };
 }

5:JS修改CSS樣式post

var obj = document.getElementById("btnB");
① obj.style.backgroundColor= "black";
② obj.setAttribute("class", "style2");
https://www.cnblogs.com/susufufu/p/5749922.html（全解）

6：原生JS事件寫法

https://www.cnblogs.com/iyangyuan/p/4190773.html

7：僞類after和before的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    button{
         padding: 0;
          border: none;
         font: inherit;
         color: inherit;
          background-color: transparent;
          /* show a hand cursor on hover; some argue that we
          should keep the default arrow cursor for buttons */
          cursor: pointer;
    }
    .btn{
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius:4px;
        padding: 0.5em 1em;
        margin-top: 5px;
    }
    div{
        text-align:center;
    }
    .hr{
        width:0;
        display: inline-block;
        height: 0px;
        border-top:1px solid blue;
        transition: width 0.5s ease-out;
    }
    p{
        transition: color 0.5s ease-out;
    }
    .box{
        border:1px solid #ebebeb;
        padding: 20px 10px;
        margin:20px;
        background-color: #f7f6f6;
        display: inline-block;
    }
    .box1{
        transform: skew(30deg);
    }
    .box2{
        transform: scale(0.5,1);
    }
    .box3{
        transform: rotate(45deg);
    }
    .box4{
        transform: translate(10px,20px);
    }
    .box5{
        transform: translate(20px,40px) rotate(45deg) scale(2,1) skew(30deg);
    }
</style>
<body>
    <div>
    <p>前端學院</p>
    <div class="hr"></div>
    <br>
    <button class="btn" onclick="change()">按鈕</button>
    <br>
    <div class="box">box0</div>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
    </div>
</body>
<script>
    function change(){
        var hr = document.getElementsByClassName('hr');
        var p = document.getElementsByTagName('p');
        console.log(hr[0].style.width);
        if(hr[0].style.width){
            hr[0].style.width=null;
            p[0].style.color="black";
        }else{
        hr[0].style.width="100px";
        p[0].style.color="blue";
        }
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。