为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • lanse_ah
    使用CSS3实现导航菜单效果...
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-03-06

  • Lemon520
    /*制作圆*/ border-radius:10px; /*制作导航立体风格*/ box-shadow:0 5px 0 #f33333; /*使用伪元素制作导航列表项分隔线*/ .nav li:before{ width:1px; height:20px; content:""; position:absolute; top:15px; left:0; background-image:linear-gradient(to bottom,#000,#bebebe); box-shadow:0 2px 1px #bebebe; } /*删除第一项和最后一项导航分隔线*/ .nav li:first-child:before { width : 0px; }
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • shao0123
    animation-play-state属性主要用来控制元素动画的播放状态。 参数： 其主要有两个值：running和paused。 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
    查看全部
    0 采集 收起 来源：CSS3中设置动画的播放状态

    2015-03-05

  • shao0123
    animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放方向

    2015-03-05

  • shao0123
    animation-iteration-count属性主要用来定义动画的播放次数。如果取值为infinite，动画将会无限次的播放。
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放次数

    2015-03-05

  • shao0123
    @-webkit-keyframes around{ 0% { transform: translateX(0); } 25%{ transform: translateX(180px); } 50%{ transform: translate(180px, 180px); } 75%{ transform:translate(0,180px); } 100%{ transform: translateY(0); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; -webkit-animation:around 4s ease .1s; -webkit-animation-iteration-count:infinite; }
    查看全部
    0 采集 收起 来源：CSS3中调用动画

    2015-03-05

  • shao0123
    Keyframes介绍 Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } CSS: @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; //注意此处为animation }
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-03-05

  • shao0123
    有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。 例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;} 示例演示： 通过transition属性将一个200px *200px的橙色容器，在鼠标悬浮状态时，过渡到一个300px * 300px的红色容器。而且整个过渡0.1s后触发，并且整个过渡持续0.28s。 HTML代码: <div class="wrapper"> <div>鼠标放到我的身上来</div> </div> CSS代码: .wrapper { width: 400px; height: 400px; margin: 20px auto; border: 2px dotted red; } .wrapper div { width: 200px; height: 200px; background-color: orange; -webkit-transition: all .28s ease-in .1s; transition: all .28s ease-in .1s; } .wrapper div:hover { width: 300px; height: 300px; background-color: red; }
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2018-03-22

  • 圣卡西
    save
    查看全部
    0 采集 收起 来源：切换背景图像综合练习题

    2015-03-05

  • 接下来看啥
    “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 ****当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-03-05

  • 接下来看啥
    后代元素表达方式:例:#main p{ color:red; } 子元素:表达方式:例:#main>p{ color:red; } 后代元素包括子元素,孙子元素,重孙子元素...
    查看全部
    4 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2018-03-22

  • 接下来看啥
    1、具体来说，:target触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，如#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—target

    2018-03-22

  • shao0123
    div { width: 300px; height: 200px; background-color: orange; margin: 20px auto; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { border-radius: 20px; }
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡所需时间 transition-duration

    2015-03-05

  • shao0123
    在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-03-05

  • shao0123
    变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-03-05

首页上一页1075107610771078107910801081下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

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

查看已购买的课程