慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

yangyuan

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。 div { width: 300px; height: 200px; background-color: orange; margin: 20px auto; 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
2016-03-17
conftum

有趣的练习

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2016-03-17
伽蓝寺听雨声

read-only -moz-read-only read-write -moz-read-write

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2016-03-17
伽蓝寺听雨声

::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } 网页中选中文本的状态

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-03-17
yangyuan

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-03-17
伽蓝寺听雨声

兼容性http://www.admin10000.com/document/1900.html

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-03-17
文淇

child:固定 -of-type:可选择 first-child first-of-type last-child last-of-type （2n/odd/even） nth-child nth-of-type nth-last-child nth-last-of-type 仅一个 only-child only-of-type

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-03-17
伽蓝寺听雨声

background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-03-17
伽蓝寺听雨声

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2016-03-17
伽蓝寺听雨声

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-03-17
文淇

此功能的隐藏与显示可以做后台左侧快捷导航

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2016-03-17
yangyuan

如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-03-17
yangyuan

变形--位移 translate() translate()函数可以将元素向指定的方向移动类似于position中的relative。或以简单的理解为使用translate()函数可以把元素从原来的位置移动而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况 1、translate(x,y)水平方向和垂直方向同时移动也就是X轴和Y轴同时移动 2、translateX(x)仅水平方向移动X轴移动 3、translateY(Y)仅垂直方向移动Y轴移动适用于页面居中 transform:translate(-50%,-50%) 垂直居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-03-17
yangyuan

缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。 CSS写法： .wrapper div:hover { opacity: .5; -webkit-transform: scale(1.5); -moz-transform:scale(1.5) transform: scale(1.5); }

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-03-17
yangyuan

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-03-17

首页上一页 599 600 601 602 603 604 605 下一页尾页

0/150

提交

取消

开始学习

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

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