亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

CSS3圖片動態提示效果

jack.xu Web前端工程師
難度初級
時長 1小時12分
學習人數
綜合評分9.53
159人評價 查看評價
9.9 內容實用
9.3 簡潔易懂
9.4 邏輯清晰
  • css3原來還有這些功能
    查看全部
    0 采集 收起 來源:課程介紹

    2017-02-09

  • transition:all 2s 表示所有的屬性都將參與動畫
    查看全部
  • Html5語義化標簽 figure標簽 用于規定獨立的流內容(圖像、圖表、照片、代碼等) figcaption標簽 與figure配套使用,用于標簽定義figure元素的標題 例: <figure> <img alt="" src=""> <figcaption></figcaption> </figure> CSS3屬性 transform以及transition transform為css3屬性,主要用于元素的變形處理 屬性:translate(平移),rotate(旋轉),scale(縮放),skew(斜切)
    查看全部
  • transform的四種基本屬性:平移,旋轉,扭曲,縮放
    查看全部
    0 采集 收起 來源:課程總結

    2017-01-12

  • transform:translate 是相對于當前自己的位置定位的
    查看全部
    0 采集 收起 來源:CSS3 旋轉動畫

    2017-01-12

  • p:nth_of_type(1){transition-delay:0.05s} p:nth_of_type(2){transition-delay:0.05s} p 標簽同級的兄弟元素
    查看全部
    0 采集 收起 來源:CSS3 平移動畫

    2017-01-12

  • figure:figcaption{h5新增標簽:規定獨立內容提高圖片識別效率,配套使用
    查看全部
  • 父容器中有相對定位時,子容器中的絕對定位就根據父容器
    查看全部
    0 采集 收起 來源:HTML基本樣式

    2017-01-11

  • @media screen and (min-width: 1001px){ figure{width: 33.3%;} } @media screen and (max-width: 600px){ figure{width:100%;} } @media screen and (min-width:600px) and (max-width: 1000px){ figure{width:50%;} }
    查看全部
    1 采集 收起 來源:CSS3 扭曲動畫

    2017-01-06

  • opacity:0.8; 透明度 <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)"> 當屏幕的寬度大于等于400px的時候,應用styleA.css 在media屬性里: screen 是媒體類型里的一種,CSS2.1定義了10種媒體類型 and 被稱為關鍵字,其他關鍵字還包括 not(排除某種設備),only(限定某種設備) <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> 當屏幕的寬度大于600小于800時,應用styleB.css @media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時,應用下面的CSS樣式*/ .class {background: #ccc; } } -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */
    查看全部
    0 采集 收起 來源:CSS3 平移動畫

    2018-03-22

  • 媒體查詢可以備用在css中的@media 和@import 規則上 @media sreen and (width:800px){ 樣式 } @import url(example.css) screen and (width:800px) <link media="screen and (width:800px)" rel="stylesheet" href="example.css" />0
    查看全部
    0 采集 收起 來源:媒體查詢

    2018-03-22

  • transform:all 2s ease-in 1s; transform:translate(xpx,ypx)平移//all所有指定元素 2s 過渡動畫時間 ease-in/ease out 慢速開始,然后變快 /慢速結束的過渡效果 1s 推遲多久才執行 transform:width 2s ease-in 1s; //指定寬度
    查看全部
  • transition過度動畫處理 ie6-9 不支持 property:檢索或設定對象中的參與過渡的屬性 duration 過渡動畫時間 delay 檢索或設置對象延遲過渡的時間 timing-function 檢索或設置對象中過渡的動畫類型(linear ease ease-in ease-out ease-in-out)
    查看全部
  • translate 指定對象的2dtranslation 第一個x軸 第二個y軸 第二個參數未提供則默認0 例如 transform:translate(10px,10px); 平移 rotate 旋轉 需要選有transform-origin屬性的定義 (設定元素的中心點) rotate(90deg) ,transform-origin:0 0; scale 縮放 transform:scale(1.3,1.3);/*縮放 無單位*/ skew 斜切 transform:skew(10deg,2deg);/*斜切 單位deg*/ transform-origin:0 0; /*旋轉中心點 定義 00 左上角*/ transform:rotate(0deg); /*旋轉*/ transform:translate(10px,100px;); /*平移*/ transform:scale(1.3,1.3);/*縮放 無單位*/ transition: transform 3s;
    查看全部
  • transform transition transform css3屬性 主要用于元素變形處理 屬性:translate 平移 rotate 旋轉 scale 縮放 skew 斜切 兼容性 ie6-8 不兼容
    查看全部

舉報

0/150
提交
取消
課程須知
1、您要具備HTML和CSS基礎知識 2、了解CSS3中的動畫。
老師告訴你能學到什么?
1,學會兩個HTML5新標簽figure以及figcaption 2,學會使用CSS的transform 3,學會使用CSS3的transition 4,學會利用屬性配合制作出絢麗的動畫效果

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!