慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

kingry

总结下，CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2015-09-30
kingry

iteration英 [ɪtə'reɪʃ(ə)n]美 [,ɪtə'reʃən] n. [数] 迭代；反复；重复 iteration-count 迭代计数 infinite英 ['ɪnfɪnət]美 ['ɪnfɪnət] n. 无限；[数] 无穷大；无限的东西（如空间，时间）

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2015-09-30
kingry

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

查看全部

0 采集收起来源：CSS3中调用动画
2015-09-30
丨汧心忄夬泺

::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)都添加一个空元素，然后为这两个空元素添加阴影特效。想看这个知识点深入讲解的小伙伴请观看《css3实现图片阴影效果》中的第1-6小节。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
kingry

Keyframes介绍 Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。浏览器的支持情况：Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。案例通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。 HTML: <div>鼠标放到我身上</div> CSS: @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 { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2018-03-22
丨汧心忄夬泺

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。示例演示使用“:read-write”选择器来设置不是只读控件的文本框样式。 HTML代码： <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> CSS代码： form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; }

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2018-03-22
丨汧心忄夬泺

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” 示例演示通过“:read-only”选择器来设置地址文本框的样式。 HTML代码： <form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> </div> </form> CSS代码： form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; } form > div { margin-bottom: 10px; } input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; } input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
丨汧心忄夬泺

::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。示例演示: 通过“::selection”选择器，将Web中选中的文本背景变成红色，文本变成绿色。 HTML代码： <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，</p> CSS代码： ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } 结果演示：注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2018-03-22
丨汧心忄夬泺

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2015-09-30
丨汧心忄夬泺

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2015-09-30
丨汧心忄夬泺

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2015-09-30
sweetlife哦耶

二、CSS3的魅力之处： 1.可简化代码； 2.可实现多栏布局； 3.可支持多种色彩； 4.可实现旋转、缩放、平移、渐变等效果。

查看全部

0 采集收起来源：CSS3能做什么？
2015-09-30
sweetlife哦耶

CSS3——梦想起航：一、认识CSS3：需要前缀才可以让其他的浏览器识别，因为CSS3目前还是W3C标准国际里的其外的私有属性。

查看全部

0 采集收起来源：什么是CSS3？
2015-09-30
kingry

动画--过渡延迟时间 transition-delay transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;} 示例演示：通过transition属性将一个200px *200px的橙色容器，在鼠标悬浮状态时，过渡到一个300px * 300px的红色容器。而且整个过渡0.1s后触发，并且整个过渡持续0.28s。 HTML代码: <div class="wrapper"> <div>鼠标放到我的身上来</div> </div> CSS代码: .wrapper { width: 400px; height: 400px; margin: 20px auto; border: 2px dotted red; } .wrapper div { width: 200px; height: 200px; background-color: orange; -webkit-transition: all .28s ease-in .1s; transition: all .28s ease-in .1s; } .wrapper div:hover { width: 300px; height: 300px; background-color: red; }

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2018-03-22
kingry

width: 200px; height: 200px; background-color: orange; margin: 20px auto; border-radius: 100%; 做出了一个圆···· 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

查看全部

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

首页上一页 751 752 753 754 755 756 757 下一页尾页

0/150

提交

取消

开始学习

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

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