慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

桥风L

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

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
桥风L

用来将背景图片做适当的裁剪以适应实际需要。语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-08-29
桥风L

background-origin border-box | padding-box | content-box;

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-08-29
桥风L

@font-face { font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); } .demo { width: 340px; padding: 30px; color: #566F89; background: #000; font-size:58px; font-family: "MOOC Font"; }

查看全部

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

太难了

查看全部

2 采集收起来源：制作3D旋转导航综合练习题
2015-08-28
417435584

设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-08-28
417435584

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

查看全部

0 采集收起来源：CSS3中调用动画
2015-08-28
417435584

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-08-28
Timilong

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-08-28
Timilong

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-08-28
417435584

动画-动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有： HTML: <div></div> CSS: div { width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s; } div:hover { background-color: orange; } 演示结果: 鼠标移入鼠标移出特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。-过渡属性 transition-property

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2018-03-22
自由的鱼儿

background-size:auto/cover/长度/%/contain

查看全部

0 采集收起来源：CSS3背景 background-size
2015-08-27
自由的鱼儿

渐变色彩用的是background-image属性不是color属性

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-08-27
417435584

变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-08-27
417435584

切换背景图像综合练习题 1、给每个缩略图设置不同的图片提示：使用伪结构选择器:nth-of-type()，并且配合::after 2、给每个缩略图添加透明度蒙板效果提示：使用伪类选择器::before给缩略图添加蒙板效果 3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度提示：通过:hover和::before配合修改opacity的值为0 4、点击缩略图，切换背景图片提示：通过目标选择器:target进行背景图片的切换 5、控制不是被点击图片的层级大小，让其不显示提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-08-27

首页上一页 800 801 802 803 804 805 806 下一页尾页

0/150

提交

取消

开始学习

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

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