慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

荒野上摔倒

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法：animation-name: none IDENT[,noneDENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

查看全部

0 采集收起来源：CSS3中调用动画
2016-09-29
荒野上摔倒

动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition 它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。创建简单的过渡效果步骤：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：background-color/position border-bottom(right、top、left)-color(width) border-spacing word-spacing bottom clip color font-size font-weight height left letter-spacing line-height mregin-bottom/left/right/top max-height/width min-height/width opacity outline/padding-color/width/height/bottom text-indent/shadow vertical-align visibility width z-index 当“transition-property”属性设置为all时，表示的是所有中点值的属性。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-09-28
荒野上摔倒

变形--矩阵 matrix()是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，CSS3中的transform属性值 a为元素的水平伸缩量，宽度比例，1为原始大小；b为纵向扭曲，上下倾斜，0为不变，1为2倍；c为横向扭曲，左右倾斜，0不变；d为垂直伸缩量，高度比例，1为原始大小；e为水平偏移量，x轴上左右位移，0是初始位置；f为垂直偏移量，y轴上下位移，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-09-28
Laixin1

CSS3 background-origin设置元素背景图片的原始起始位置。需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-09-28
荒野上摔倒

扭曲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-09-28
荒野上摔倒

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转 <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2018-03-22
ollie4050149

background-origin ： border-box padding-box content-box;

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-09-28
ollie4050149

to top to right to bottom to left to top left to top right

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-09-28
荒野上摔倒

::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
荒野上摔倒

:read-only伪类选择器指定处于只读状态元素的样式。通过“:read-only”选择器来设置地址文本框的样式。

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2016-09-28
荒野上摔倒

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示。 ::selection将Web中选中的文本背景变色，文本变色。 ::-moz-selection { background: red; color: green;}Firefox 支持替代的 ::-moz-selection。 ::selection { background: red; color: green; }IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-09-28
荒野上摔倒

:checked选择器在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。在CSS3中，通过状态选择器:checked配合其他标签实现自定义样式。:checked表示的是选中状态。

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2016-09-28
荒野上摔倒

在Web的表单中，有些表单元素有可用:enabled和不可用:disabled状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。 <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
荒野上摔倒

only-of-type选择器 :only-of-type用来选择一个元素是它的父元素的唯一一个相同类型的子元素。换一种说法:only-of-type表示一个元素有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-09-28
荒野上摔倒

:only-child选择的是父元素中只有一个子元素，只有唯一的一个子元素。 :only-child选择器，来控制仅有一个子元素的背景样式 HTML代码： <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码： .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }

查看全部

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

首页上一页 396 397 398 399 400 401 402 下一页尾页

0/150

提交

取消

开始学习

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

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