慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

温柔了时光

transition-property:指定过渡或动态模拟的CSS属性

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-07-15
温柔了时光

:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2016-07-15
小眼大世界

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction 有4个值的, normal, reverse, alternate, alternate-reverse. normal正常播放，reverse倒放，alternate先正放后倒放成一个循环，alternate-reverse先倒放后正放形成一个循环。倒放时，animation-timing-function也倒放

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-07-15
blablabla

从自身x,y中线开始移动

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-07-14
yyyyy_

3d旋转导航

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2016-07-14
qq_倾颖_03419353

x:负左右正； y:负上正下； 1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-07-14
程序员小公举

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello CSS3</title> <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>杨玲枝</h1> </body> </html>

查看全部

0 采集收起来源：什么是CSS3？
2018-03-22
qq_倾颖_03419353

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

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-07-14
yyyyy_

@keyframes --> 关键帧 0% ~ 100%之间可以设置多个帧， 0%-100% = from()-to() animation-name --> 主要用来调用@keyframes定义好的动画，定义的动画名称完全一致 animation-duration --> 主要用来设置动画播放时间 animation-timing-function --> 主要用来设置动画的速度形式 animation-delay --> 主要用来设置动画的延迟时间 animation-iteration-count --> 主要用来定义动画的播放次数（可为数值次数 infinite(无限次数)） animation-direction --> 主要用来设置动画播放方向（normal（默认值，动画的每次循环都是向前播放） alternate（动画播放在第"奇数"次（1,3,5……）正常播放，第“偶数”次（2,4,6……）向反方向播放））

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2018-03-22
温柔了时光

text-shadow: X-Offset Y-Offset blur color;

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-07-14
温柔了时光

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-07-14
温柔了时光

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-07-14
慕粉3399489

max-width//表示不超过最大的这个值生效，min-width/要达到这个值才生效

查看全部

0 采集收起来源：Media Queries使用方法
2016-07-13
慕粉3399489

5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: flex; flex-direction: column; align-items: flex-start; } 6.Flex项目移动右边 .flexcontainer{ display: flex; flex-direction: row; justify-content: flex-end; }.flexcontainer{ display: flex; flex-direction: column; align-items: flex-end; } 7.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{display: flex; flex-direction: row; align-items: center; justify-content: center; } .flexcontainer{ display: flex; flex-direction: column; center; align-items: justify-content: center; } 8.Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ flex:200; } .smallitem{flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2016-07-13
blablabla

“:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。建议使用:root方法。另外在IE９以下还可以借助“:root”实现hack功能。

查看全部

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

首页上一页 480 481 482 483 484 485 486 下一页尾页

0/150

提交

取消

开始学习

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

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