慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Snail_N

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-09-05
Snail_N

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。 resize: none | both | horizontal | vertical | inherit

查看全部

0 采集收起来源：自由缩放属性resize
2015-09-05
鱼和熊掌我都有

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

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-09-04
Snail_N

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-09-04
Snail_N

但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-09-04
Snail_N

a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-09-04
Snail_N

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-09-04
Snail_N

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-09-04
鱼和熊掌我都有

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | IDENT[,none|DENT]*;

查看全部

1 采集收起来源：CSS3中调用动画
2015-09-04
慕慕6457873

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2015-09-04
慕慕6457873

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2015-09-04
慕莱坞1975833

示例展示点击链接显示隐藏的段落。 HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> CSS代码： .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
慕莱坞1975833

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-09-04
慕莱坞1975833

“:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。建议使用:root方法。另外在IE９以下还可以借助“:root”实现hack功能。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
慕莱坞1975833

box-shadow是向盒子添加阴影。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-09-04

首页上一页 794 795 796 797 798 799 800 下一页尾页

0/150

提交

取消

开始学习

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

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