慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

专业装B不拐弯

CSS3 Keyframes介绍 Keyframes被称为关键帧，主要以@keyframes开头，后面紧接着动画名称加上以对花括号{...} 其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。 @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div:hover{ animation: wobble 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2017-03-21
专业装B不拐弯

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开 a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2017-03-21
专业装B不拐弯

CSS3中的动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数” ease:速度由快到慢，逐渐变慢 linear:恒速 ease-in:速度越来越快，加速状态 ease-out:速度越来越慢，减速状态 ease-in-out:先加速再减速

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2017-03-21
专业装B不拐弯

CSS3中的动画--过渡属性 transition-property CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或者动态模拟css属性 transition-duration:指定完成过渡所需要的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 -webkit-transition-property: width; transition-property: width; -webkit-transition-duration:.5s; transition-duration:.5s; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-delay: .18s; transition-delay:.18s;

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-03-21
专业装B不拐弯

CSS3中的变形--原点 transform-origin 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形 -webkit-transform-origin: left top; transform-origin: left top;

查看全部

1 采集收起来源：CSS3中的变形--原点 transform-origin
2017-03-21
专业装B不拐弯

CSS3中的变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置; -webkit-transform: matrix(1,0,0,1,50,50); -moz-transform:matrix(1,0,0,1,50,50); transform: matrix(1,0,0,1,50,50);

查看全部

1 采集收起来源：CSS3中的变形--矩阵 matrix()
2017-03-21
专业装B不拐弯

CSS3中的变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。 translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px);

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-03-21
专业装B不拐弯

CSS3中的变形--缩放 scale() scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放） -webkit-transform: scale(0.8,0.8); -moz-transform:scale(0.8,0.8); transform:scale(0.8,0.8);

查看全部

1 采集收起来源：CSS3中的变形--缩放 scale()
2017-03-21
专业装B不拐弯

CSS3中的变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。 skew(x,y)使元素在水平和垂直方向同时扭曲 skewX(x)仅使元素在水平方向扭曲变形 skewY(y)仅使元素在垂直方向扭曲变形 -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg);

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2017-03-21
慕无忌2819741

这节要重新看一遍

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2017-03-21
慕无忌2819741

display: block 又忘记是什么了

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2017-03-21
专业装B不拐弯

CSS3变形--旋转 rotate() 旋转rorate（）函数通过指定的角度参数使元素相对原点进行旋转。如果是正直，元素相对原点中心顺时针旋转，为负值就逆时针旋转。 transform: rotate(45deg);

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2017-03-21
慕无忌2819741

opacity 设置透明级别

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2017-03-21
慕无忌2819741

为什么不能用n+1啊

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2017-03-20
专业装B不拐弯

CSS3选择器 :read-write选择器 :read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。 :read-write”选择器来设置不是只读控件的文本框样式。 input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36;

查看全部

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

首页上一页 284 285 286 287 288 289 290 下一页尾页

0/150

提交

取消

开始学习

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

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