慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

林熙儿

animation-fill-mode动画属性： 1、none：动画完成最后一帧时，会反转到初始帧处； 2、forwards：动画在结束后继续应用最后的关键帧的位置； 3、backwards：应用动画时迅速应用动画的初始帧；（结束后会反转到初始帧处） 4、both：动画同时具有forwards和backwards的效果，即应用动画时迅速应用动画的初始帧，动画在结束后继续应用最后的关键帧的位置；

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2016-04-29
weibo_诸小呆_0

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-04-29
weibo_诸小呆_0

transform: matrix(1,0,0,1,100,100) 实现translate(100px,100px)的效果

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-04-29
林熙儿

animation动画参数 animation-name: move; animation-duration: 10s; animation-timing-function: ease-in; animation-delay: .2s; animation-iteration-count:infinite; animation-direction:alternate;

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-04-29
歪程序猿

制作导航菜单分隔线(用伪元素很简便): .nav li:before{ content:"|"; padding-right:20px; } /*删除第一项导航分隔线*/ .nav li:first-child:before{ content:""; }

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
weibo_诸小呆_0

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 opsition:absolute 1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央； 2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-04-29
林熙儿

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2016-04-29
林熙儿

在@keyframes中 from：0%； to：100%；

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2016-04-29
weibo_诸小呆_0

缩放 scale()函数让元素根据中心原点对对象进行缩放。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-04-29
林熙儿

想让一个动画无限循环下去的： animation-iteration-count:infinite;

查看全部

0 采集收起来源：CSS3中调用动画
2016-04-29
weibo_诸小呆_0

rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 transform --> 元素的改变 transform:rotate() --> 作用用于旋转 transform:skew() --> 作用用于元素的倾斜显示与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 transform:scale() --> 作用用于元素的缩放 transform:translate() --> 作用向指定的方向移动，类似于position中的relative

查看全部

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

CSS3多重背景语法就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意： 1:用逗号隔开每组 background 的缩写值； 2:如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 3:如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 4:background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
歪程序猿

background-size设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
在你坟前蹭个WiFi

结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。示例演示：通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
weibo_诸小呆_0

span属于行内元素,一开始旋转不需要display:block,是因为旋转的是div这个块,而span被包含在div内,旋转时不受影响,后面旋转却是单独针对文本,所以需要将行内元素转变成块级元素

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-04-29

首页上一页 550 551 552 553 554 555 556 下一页尾页

0/150

提交

取消

开始学习

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

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