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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 属性选择器 E[att^=val] ==>匹配元素E,且E定义了属性 att,其属性以 val"开头"的任何字符串 E[att$=val] ==>匹配元素E,且E定义了属性 att,其属性以 val"结束"的任何字符串 E[att*=val] ==>匹配元素E,且E定义了属性 att,其属性"包含"了val的任何位置相匹配
    查看全部
  • animation-direction属性主要用来设置动画播放方向,其语法规则如下: animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值:normal、alternate 1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放; 2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 例如:通过animation-direction属性,将move动画播放动画方向设置为alternate,代码为: animation-direction:alternate;
    查看全部
  • text-shadow可以用来设置文本的阴影效果。 语法: (类似于box-shadow) text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
    查看全部
  • @font-face 能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face{ font-family:"字体名称"; src:字体文件在服务器上的相对或绝对路径;} 使用: p{ font-family:"字体名字";}
    查看全部
  • deltasdeltasdeltas deltasdeltas
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2016-03-24

  • animation-iteration-count属性主要用来定义动画的播放次数。 语法规则: animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。 举例: 通过animation-iteration-count属性让动画move只播放5次,代码设置为: animation-iteration-count:5; 注意:Chrome或Safari浏览器,需要加入-webkit-前缀!
    查看全部
  • text-overflow:clip|ellipsis clip表示对象内文字溢出时剪切; ellipsis表示显示省略标记 ps:要想在文本溢出时显示省略号的效果需要 text-overflow:ellipsis; white-space:nowrap(定义强制文本在一行内显示); overflow:hidden(及溢出内容为隐藏); word-wrap也可以设置文本行为,当前行超过指定容器的边界时是否断开转行 word-wrap:normal|break-word; normal:指浏览器默认方式 break-word:指内容将在边界内换行,在URL地址或长英文内部断开,此属性不常用
    查看全部
  • animation-delay属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay属性一样,用于定义在浏览器开始执行动画之前等待的时间。 语法规则: animation-delay:<time>[,<time>]*
    查看全部
  • 颜色渐变: 分为线性渐变(linear-gradient)和径向渐变(radial-gradient) 语法: (注意方向to和at) 如background-image:linear-gradient(to left,red,orange,yellow,green,blue); 如background-image:radial-gradient(at left,red,orange,yellow,green,blue); linear-gradient(1,2,3) 1为渐变方向参数: to top 从下向上 to right 从左向右 to bottom to left to top left 右下角到左上角 to top right 2,3表示颜色的起始点和结束点,可以有多个颜色值
    查看全部
  • 使用Css3实现导航菜单栏 运用到了border-radius实现圆角 使用box-shadow实现立体风格 使用渐变与伪元素制作
    查看全部
  • animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。 语法规则: animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
    查看全部
  • 颜色之RGBA RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。 百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。 A为透明度参数,取值在0~1之间,不可为负值。
    查看全部
  • 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如: background:url(xx.jpg) 10px 20px no-repeat; 但是又比背景图片复杂一些。
    查看全部
  • .box_shadow{ box-shadow:4px 2px 6px #333333 inset; }
    查看全部
  • 圆角效果 border-radius border-radius是向元素添加圆角边框。 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部

举报

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

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