慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

AGhosts

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-10-27
qq_相信自己_25

：：after和：：before是用来给元素的前面或者后面插入内容的常结合content来使用，最常用与清除浮动。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2016-10-27
qq_相信自己_25

:read-write是用来设置非只读状态的样式

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2016-10-27
AGhosts

过渡属性 transition-property:就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。创建简单的过渡效果步骤：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。过渡动画的CSS属性名称，这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：background-color/position border-bottom(right..)-color/width border/letter/word-spacing bottom clip color font-size/weight height left line-height margin/padding-bottom.. max-height/width min-height/width opacity outline-color/width/height/bottom text-indent/shadow vertical-align visibility width z-index 当“transition-property”属性设置为all时，表示的是所有中点值的属性。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 ease 由快到慢，逐渐变慢（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 加速（渐显效果）（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 减速（渐隐效果）（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 先加速，再减速（渐显渐隐效果）（等于 cubic-bezier(0.42,0,0.58,1)）。 Linear：恒速。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-10-27
qq_相信自己_25

:read-only选择器是用来设置只读状态的元素的样式。 <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> css： input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
qq_相信自己_25

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-10-27
qq_相信自己_25

:disabled不可用选择器，根据表单中设置的是否可用标记来选择

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2016-10-27
AGhosts

默认原点：一般是中心点，中心点是居于元素X轴和Y轴的50%处。即center处在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形 transform-origin取值：四边中心：top，right，bottom，left，四角：top left ，top right ，bottom right ，bottom left 。中心处：center 。语法： transform-origin: left top; transform的origin属性可以改变元素的中心的元素的中心的用于：旋转rotate、位移translate、缩放scale、扭曲skew

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-10-27
AGhosts

matrix(a,b,c,d,e,f): matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()) transform: matrix(水平缩放，垂直扭曲，水平扭曲，垂直缩放，水平偏移，垂直偏移） matrix(长度缩放，y轴扭曲，x轴扭曲，宽度缩放，x位移，y位移) matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置；在CSS3中的变形，如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)

查看全部

1 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-10-27
qq_相信自己_25

:enableed和:disabled 是表单元素的可用与不可用选择器。默认的表单样式是可用的。 <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </div> </form> css代码： div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red; }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
qq_相信自己_25

：only-of-type是一个用来选择父元素中有唯一一个这种类型元素的元素

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-10-27
qq_相信自己_25

：noly-child选择器选择的是父元素中只有一个子元素而且是唯一的子元素。语法实例： p:only-child{background:red；} <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div>

查看全部

0 采集收起来源：CSS3 only-child选择器
2018-03-22
AGhosts

translate()可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动）

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-10-27
AGhosts

scale()以元素中心为基点进行缩放。 (值>1时，扩大，值<1时缩小) 1.scale(X,Y)使元素水平和垂直方向同时缩放; 2.scaleX(x)使元素水平方向缩放; 3.scaleY(y)使元素垂直方向绽放; 注：缩放值默认为1，0.01-0.99为缩小；1.01以上为放大当 scale 的值为一个时，表示X和Y同时缩放。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2018-03-22
AGhosts

概述：transform:skew(x,y)是改变元素的形状，不会让它旋转<br> 它是让元素以其中心位置，围绕X轴与Y轴倾斜一定的角度它还有skewY()/skewX()是单独让X轴或者Y轴倾斜单位是deg； x 为正逆时针，为负顺时针； y正好相反； Skew()具有三种情况： 1、skew(x,y)第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

查看全部

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

首页上一页 374 375 376 377 378 379 380 下一页尾页

0/150

提交

取消

开始学习

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

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