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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 有的时候我们会用到对动画的播放状态的设置,此时我们可以使用到 animation-play-state的属性来进行设置: 如: animation-play-state:paused;表示暂停 animation-play-state:running;表示播放 注意要灵活运用
    查看全部
  • 设置动画播放方向: animation-direction:normal | alternate [, normal | alternate]
    查看全部
  • animation-iteration-count属性主要用来定义动画的播放次数: 1.通常为整数,可以为带小数的数字 2.如果取值为infinite,动画将会无限次的播放
    查看全部
  • 上次我们说到,我们使用animation的简写方法可以实现我们自定义的方法的调用,其实我们还可以使用区分的方法来实现,如 animation:around;//这里的around必须是我们使用@keyframes的时候定义的动画的名字,而且大小写都必须是相同的
    查看全部
    0 采集 收起 来源:CSS3中调用动画

    2016-01-15

  • 我们在@keyframes中使用百分比的时候代表的是分别使用此动画的时候对应的时间点会使用到了对应样式
    查看全部
  • KeyFrames的使用: 我们在使用KeyFrames的时候主要是对动画进行设计,具体的使用还是要使用animation的方法来实现这种效果的: 如: @Keyframes changecolor{} 这就是自定义了一个动画, 我们在使用的时候可以是这样的 div:hover{ animation:changecolor 5s ease-out .2s;//这里的changecolor就是我们在上面的Keyframes中定义的一个样式规则 }
    查看全部
  • 嵌入字体:@font-face @font-face @font-face @ font-face @font-face @ font-face @font-face @font-face @font-face @font-face @font-face
    查看全部
  • linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear-gradient linear=gradient linear-gradient linear-gradient linear-gradient linear-gradient
    查看全部
  • 设置渐变:linear-gradient 角度: top top下向上 , top right左向右, top boottom上向下, to left右向左, to top left右下角到左上角, to top right左上角到右上角
    查看全部
  • 边框图片填充:border-shadow: url()设置地址, 50 设置图片像素, 设置参数, 有三种: round平铺,repeat重复, stretch拉伸
    查看全部
  • 边框图填充:border-image
    查看全部
  • 盒子阴影效果:box-shadow
    查看全部
  • CSS3的伪类“:before”,“:after”可以生成内容。其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
    查看全部
    0 采集 收起 来源:CSS生成内容

    2016-01-14

  • media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
  • 通过上面的介绍,大家对响应式设计有了一定的了解,但在实际制作中还是有一些布局技巧的: 在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div; 第二,不要使用内联元素(inline); 第三,尽量少用JS或flash; 第四,丢弃没用的绝对定位和浮动样式; 第五,摒弃任何冗余结构和不使用100%设置。 有舍才有得,丢弃了一些对Responsive有影响的东东,那么有哪些东东能帮助Responsive确定更好的布局呢? 第一,使用HTML5 Doctype和相关指南; 第二,重置好你的样式(reset.css); 第三,一个简单的有语义的核心布局; 第四,给重要的网页元素使用简单的技巧,比如导航菜单之类元素。 使用这些技巧,无非是为了保持你的HTML简单干净,而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现,比如说CSS3特效或者JS脚本。 说了这么多,怎么样的布局或者说HTML结构才是简单干净的呢?这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式(以及与样式相关的信息),在浏览器中打开,如果你的内容排列有序,方便阅读,那么你的这个结构不会差到哪里去。
    查看全部

举报

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

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