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

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下载
官方微信
友情提示:

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