慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Miss馬也

transition-timing-function属性指的是过渡的“缓动函数”。

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2015-03-09
Miss馬也

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2015-03-09
Miss馬也

通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-03-09
Miss馬也

有点难…… 变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2015-03-09
慕前端9276177

^：以这个字符串开头的； $：以这个字符串结尾的； *：包含这个字符串的。

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-03-08
慕前端9276177

渐变颜色是在background-image下写的，使用linear-gradient的话是渐变类型，后跟括号，可设定角度，然后是多个颜色，用逗号隔开

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-03-08
安圭拉

html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; } <style type=text/css> a[class ^= column]{ background:red; } a[href $= doc]{ background:green; } a[title *= box]{ background:blue; }

查看全部

0 采集收起来源：CSS3选择器属性选择器
2018-03-22
安圭拉

.nav a{ display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .nav a:hover{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); .nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; } /*使用伪元素制作导航列表项分隔线*/ .nav li:before{ content:""; width:1px; height:12px; position:absolute; top:20px; left:0; background-image:linear-gradient(to bottom,#000,#bebebe,#f65f57,#993333,#f65f57); box-shadow:0 2px 1px #bebebe; } /*删除第一项和最后一项导航分隔线*/ .nav li:first-child:before{ width:0; }

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
安圭拉

圆角效果 border-radius 四个半径值分别是左上角、右上角、右下角和左下角，顺时针不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-03-07
安圭拉

什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。前缀浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera 相信CSS3的时代马上就要到来了！ IE党注意了：此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器的最高版本学习本课程。

查看全部

0 采集收起来源：什么是CSS3？
2015-03-07
candywxt

6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-03-07
nini80mo

6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-03-06
jone8881

@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
小新_zty

:read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。FireFox需要加前缀：示例： input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; } input[type="text"]:-moz-read-write{ border:2px solid red; } input[type="text"]:read-write{ border:2px solid red; }

查看全部

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

::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。示例： ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2015-03-06

首页上一页 1074 1075 1076 1077 1078 1079 1080 下一页尾页

0/150

提交

取消

开始学习

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

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