慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

恭宽信

圆角效果以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。

查看全部

0 采集收起来源：CSS3能做什么？
2015-09-26
22不小了

div { width: 200px; height: 200px; background: red; margin: 20px auto; animation-name:redToBlue; animation-duration: 20s; animation-timing-function: ease; animation-delay: 1s; animation-fill-mode: both;// animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。 }

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-09-25
22不小了

span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); animation-name: move; animation-duration: 10s; animation-timing-function: ease-in; animation-delay: .2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:paused; 属性主要用来控制元素动画的播放状态。 } div:hover span { animation-play-state:running; }

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-09-25
22不小了

div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:.1s; animation-iteration:infinite; } 动画属性

查看全部

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

background-size:auto|百分比|长度值|cover|contain

查看全部

0 采集收起来源：CSS3背景 background-size
2015-09-25
xiachunhang

background-clip:border-box|padding-box|content-box|no-clip

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-09-25
xiachunhang

background-origin:border-box|padding-box|content-box; 默认是padding-box 背景必须是no-repeat此属性才有效

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-09-25
xiachunhang

@font-face{ font-family:字体名称; src:字体在服务器上的地址; }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2015-09-25
xiachunhang

box-shadow:x偏移量 y偏移量 [阴影模糊距离] [阴影尺寸] [颜色] [投影方式]

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-09-25
Skye009

1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下： @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2015-09-25
赵铁柱

.flexcontainer{ display: flex; flex-direction: row; justify-content:flex-start; /*Flex项目移到左边-横向*/ } .flexcontainer{ display: flex; flex-direction: column; align-items: flex-start; } /*Flex项目移到左边-纵向*/ .flexcontainer{ display: flex; flex-direction: row; justify-content:flex-end; /*Flex项目移到右边-横向*/ } .flexcontainer{ display: flex; flex-direction: column; align-items: flex-end; /*Flex项目移到右边-纵向*/ } .flexcontainer{ display: flex; flex-direction: row; align-items: center; justify-content: center; } /*Flex项目居中-横向*/ .flexcontainer{ display: flex; flex-direction: column; align-items: center; justify-content: center; } /*Flex项目居中-纵向*/

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-09-25
Skye009

Responsive设计——meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。个meta标签被称为可视区域meta标签，其使用方法如下。 <meta name=”viewport” content=”” /> 在content属性中主要包括以下属性值，用来处理可视区域。在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
22不小了

e333

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-09-25
22不小了

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-09-25
慕仔2685370

空格也算是内容

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2015-09-25

首页上一页 758 759 760 761 762 763 764 下一页尾页

0/150

提交

取消

开始学习

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

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