慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

乔布斯写代码

overflow:hidden;//超出部分隐藏 text-overflow:ellipsis;//超出部分显示山略号 white-space:nowrap; //强制不换行显示省略出省略号的三个必要条件

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2017-03-22
乔布斯写代码

background-image:linear-gradient(xdeg,color1,color2,color3) 最少需要两个颜色段

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2017-03-22
乔布斯写代码

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X>0 左边框的阴影偏移 X<0 右边框的阴影偏移 Y>0 上边框的阴影偏移 Y<0 下边框的阴影偏移投影方式：默认为外阴影，inset为内阴影同一个dom可以同事设置多个阴影值。

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2018-03-22
乔布斯写代码

border-radius:10px 4px 3px 2px; 分别配置四个角的半径，从【左上】开始顺时针。注意像素之间是空格不是逗号。

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2017-03-21
慕无忌2819741

与relative的比较相同点：两者都是相对于本身移动位置区别： 1、当元素原来已经有position:absolute的时候，这时候你想相对于本身移动，可以使用translate 2、做动画的时候translate更适合，不会引起页面的重排和重绘 3、关于transform类的，可以使用GPU加速，提高浏览器的性能？总之：transform更适用于动画

查看全部

1 采集收起来源：CSS3中的变形--位移 translate()
2017-03-21
慕无忌2819741

translate实现水平居中 1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央； 2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-03-21
迂鱼雨玉

总结下，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中设置动画播放时间
2017-03-21
专业装B不拐弯

CSS3 伸缩布局规定容器中的图片等能够随浏览器的变化而改变大小 display:flex; 垂直方向：align-items:center/flex-start 水平方向:justify-content:center/flex-start

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2017-03-21
专业装B不拐弯

CSS3 多列布局——Columns 使文本变成多列显示 columns：<column-width> || <column-count> 举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22
迂鱼雨玉

内联元素也就是行内元素不能更改宽度与高度，只能根据内容来确定要显示的大小，自然就无法旋转等，所以一定要将其转化为块元素它才会具有占据一整行的特性，也就能自由更改宽度和高度。

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2017-03-21
专业装B不拐弯

CSS3中设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。 none:默认值，动画结束后回到初始处 forwards:动画结束后继续应用最后的关键帧的位置 backwards:会在向元素应用动画样式时迅速应用动画的初始帧 both:元素动画同时具有forwards和backwards效果 animation-fill-mode:forwards;

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2017-03-21
专业装B不拐弯

CSS3中设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。其主要有两个值：running和paused。例如，页面加载时，动画不播放。代码如下： animation-play-state:paused;

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2017-03-21
专业装B不拐弯

CSS3中设置动画播放方向 animation-direction属性主要用来设置动画播放方向 animation-direction:normal | alternate [, normal | alternate]* normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。 animation-direction:alternate;

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2017-03-21
专业装B不拐弯

CSS3中设置动画播放次数 animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放 animation-iteration-count:5; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2018-03-22
专业装B不拐弯

CSS3中调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。 animation-name: none | IDENT[,none|DENT]*; none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

查看全部

0 采集收起来源：CSS3中调用动画
2017-03-21

首页上一页 283 284 285 286 287 288 289 下一页尾页

0/150

提交

取消

开始学习

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

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