慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

UFO2015

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-05-24
野山椒鸡杂

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求： 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) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2015-05-24
野山椒鸡杂

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" /> 对应的CSS代码： @media (min-device-width:600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-width:800px){ img[data-src-800px] { content:attr(data-src-800px,url); } }

查看全部

0 采集收起来源：Responsive设计（一）
2018-03-22
野山椒鸡杂

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-05-24
UFO2015

白色 White FFFFFF 255,255,255

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-05-24
野山椒鸡杂

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，

查看全部

0 采集收起来源：CSS3 盒子模型
2015-05-24
野山椒鸡杂

nth-child(2n);选择偶数列

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-05-24
野山椒鸡杂

column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length>

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
野山椒鸡杂

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length>

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2018-03-22
野山椒鸡杂

每栏宽度为150px。注意每个浏览器的兼容性！

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2015-05-24
野山椒鸡杂

提示1：使用@font-face引入本地字体，本地字体的路径为： http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu 同时提供自定义字体： “sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg” 提示2：通过font-family调用自定义的字体名“sansationregular”。提示3：在元素”.three-d”上使用“perspective”给元素设置3D舞台布景，并且将其值设置为”200” 提示4：通过transition给3D舞台设置过渡动画，设置的参数为所有属性“all”,过渡时间持续“0.07s”，使用的过渡函数为“linear”。提示5：给不是当前状态的3D舞台的悬浮与聚焦状态设置旋转效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”状态下的“.three-d-box”设置z轴位移“-25px”，X轴旋转“90deg”。提示6：给3D舞台中的“.three-d-box”元素设置过渡效果，并且对其Z设置一个“-25px”旋转。提示7：在.front”元素上设置X轴的旋转，旋转度为0，同时给Z轴位移25px。另外给“.back”元素上设置X轴的旋转，旋转度为-90deg，同时Z轴位移25px。提示8：通过CSS的渐变与背景尺寸实现导航当前状态与悬浮状态下的斑纹背景效果。

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-05-24
野山椒鸡杂

原背景色1 ，动画开始色2，变成的色3， none，由1开始，最后回到1， both，由2开始，最后是3 forwards：由1开始，最后是3 backwards：由2开始，最后是1

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-05-24
野山椒鸡杂

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。例如，页面加载时，动画不播放。代码如下： animation-play-state:paused;

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-05-24
野山椒鸡杂

另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate;

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-05-24
野山椒鸡杂

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2015-05-24

首页上一页 935 936 937 938 939 940 941 下一页尾页

0/150

提交

取消

开始学习

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

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