慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

AGhosts

text-shadow可以用来设置文本的阴影效果。语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-10-25
AGhosts

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 例如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
AGhosts

1.text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法： text-overflow：clip（表示剪切）/ellipsis（表示显示省略标记）但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 2.word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。语法： word-wrap：normal（表示控制连续文本换行）/break-word（表示内容在边界换行） normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-10-25
慕粉1420362554

alternate的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。意思是说，奇数次播放动画是按顺序播放各帧动画，偶数次播放动画是按逆序播放各帧动画。

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-10-25
慕粉1420362554

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction 有4个值的, normal, reverse, alternate, alternate-reverse. normal正常播放，reverse倒放，alternate先正放后倒放成一个循环，alternate-reverse先倒放后正放形成一个循环。倒放时，animation-timing-function也倒放

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-10-25
慕粉1420362554

设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite <number> [, infinite <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放。

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2018-03-22
慕粉1420362554

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]*

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2018-03-22
慕粉1420362554

animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 animation-delay 规定动画何时开始。默认是 0。 animation-iteration-count 规定动画被播放的次数。默认是 1。 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 animation-fill-mode 规定对象动画时间之外的状态。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2018-03-22
慕粉1420362554

设置动画播放方式 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>)]* 它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。对应功如下：在调用move动画播放中，让元素样式从初始状态到终止状态时，先加速再减速，也就是渐显渐隐效果。

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
慕粉1420362554

设置动画播放方式 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>)]* 它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。 cubic-bezier bezier n. 贝塞尔曲线；贝齐尔 cubic英 ['kjuːbɪk]美 ['kjubɪk] adj. 立方体的，立方的

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
慕先生4138651

CSS3选择器 ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} 当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。关键代码分析： .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } 上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
慕先生4138651

CSS3选择器 :read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。示例演示使用“:read-write”选择器来设置不是只读控件的文本框样式。 HTML代码： <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> CSS代码： form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; } input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36; }

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2018-03-22
慕粉1420362554

tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2016-10-25
慕先生4138651

CSS3选择器 :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” 示例演示通过“:read-only”选择器来设置地址文本框的样式。 HTML代码： <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> CSS代码： form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
慕先生4138651

CSS3选择器 ::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。示例演示: 通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。 HTML代码： <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p> CSS代码： ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } 注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2018-03-22

首页上一页 378 379 380 381 382 383 384 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果