为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3图片动态提示效果

jack.xu Web前端工程师
难度初级
时长 1小时12分
学习人数
综合评分9.53
159人评价 查看评价
9.9 内容实用
9.3 简洁易懂
9.4 逻辑清晰
  • figure和figcaption
    查看全部
  • top:0px;left:0px; 直接写top:0;left:0;就行了...
    查看全部
    0 采集 收起 来源:HTML基本样式

    2015-10-23

  • transition 1.property:檢索或設置對象中的參與過度的屬性 ex:背景色 或all也可 2.duration:過渡動畫的持續時間 3.timing-function:檢索或設置對象中過度的動畫類型 漸快漸慢 預設是平滑 (linear ease ease-in ease-out ease-in-out) 4.delay:動畫多久後才開始執行 !! h2:hover{transition:all 2s ease-in 1s;transform:translate(100px);background:green;} //transition用all 後面的transform和background都會轉變成動畫 h2:hover{transition:all 2s ease-in ;transition-delay:1s;transform:translate(100px);background:green;} //transition裡面的屬性也可以拿出來
    查看全部
  • transition為css3屬性,主要用於元素的過渡動畫處理 有四個參數 1.property 2.duration 3.timing-function 4.delay 兼容性:IE10後才支持!!!跟transform不同
    查看全部
  • skew讓元素傾斜扭曲 第一個參數對應x軸 第二個參數對應y軸 skew(50deg,20deg)請看ppt截圖很清楚
    查看全部
  • transform(scale(05,0.5))指物件的2D縮放 第一個參數對應X軸 第二個參數為Y軸 參數沒有單位 參數為1的時候 元素不縮放(原始大小) 小於1會縮小 大於1會放大 剛剛中心點的設置對四個屬性都有效(transform-origin)
    查看全部
  • transform(rotate(90deg),transform-origin:0 0;) 裡面的參數可以是0~360度 如果是負數會逆時鐘轉 正數會順時鐘轉 基本上會以中心點來旋轉 如果想要以不同的點為中心來轉 需要設置transform-origin屬性 忘了說rotate是物件的2D旋轉
    查看全部
  • translate:指2D平移 transform(translate(10px,10px)); 第一個參數對應x軸,第二個參數對應y軸 如果第二個參數未提供 則默認為0
    查看全部
  • transform為CSS3屬性,主要用於元素變形處理 屬性:translate rotate scale skew IE6~IE8不支持
    查看全部
  • figure:HTML5語意化標籤(告訴瀏覽器或搜尋引擎他裡面是什麼媒體 ) 用於規定獨立的流內容(圖片 圖表 照片) figcaption:和figure搭配使用,用於定義figure元素的標題 IE9以上才能識別
    查看全部
  • <figure>//這樣就知道裡面放圖片等等 <img src=""/> <figcaption>標題</figcaption> </figure>
    查看全部
  • figure标签与figcaption标签的描述
    查看全部
  • Transform:用于元素的的变形处理 translate:对指定对象的2D 平移 translate(x,y) rotate:指定对象的的2D 旋转 Rotate(ANGLE deg),transform-origin:x y; scale:2D缩放 scale(x,y),transform-origin skew:指定对象斜切扭曲 斜切 skew(ANGLE deg,ANGLE deg)
    查看全部
  • <figrue> <img src="..."> <figcaption>内容</figcaption> </figrue>
    查看全部
  • opacity: 透明度 nth-of-type(n) n=1,2,3,4 .选择器 transition-delay:0.05s 这是延迟的写法
    查看全部
    0 采集 收起 来源:CSS3 平移动画

    2015-10-21

举报

0/150
提交
取消
课程须知
1、您要具备HTML和CSS基础知识 2、了解CSS3中的动画。
老师告诉你能学到什么?
1,学会两个HTML5新标签figure以及figcaption 2,学会使用CSS的transform 3,学会使用CSS3的transition 4,学会利用属性配合制作出绚丽的动画效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!