慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

hamsecret

制作3D旋转导航综合练习题基本没动

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-05-31
hamsecret

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下： none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-05-31
hamsecret

animation-play-state属性主要用来控制元素动画的播放状态。

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-05-31
hamsecret

animation-direction属性主要用来设置动画播放方向，其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

查看全部

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

animation-iteration-count属性主要用来定义动画的播放次数 animation-iteration-count:infinite;无限次数

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2015-05-31
hamsecret

animation-name属性主要是用来调用 @keyframes 定义好的动画注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-

查看全部

0 采集收起来源：CSS3中调用动画
2015-05-31
hamsecret

动画的浏览器兼容在FireFox ie 无须前缀，chrome Safari opera都是加-webkit- @keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } @-webkit-keyframes changecolor{ 0%{ background: red; } 20%{ background:blue; } 40%{ background:orange; } 60%{ background:green; } 80%{ background:yellow; } 100%{ background: red; } } div { width: 300px; height: 200px; background: red; color:#fff; margin: 20px auto; } div:hover { -webkit-animation: changecolor 5s ease-out .2s; animation: changecolor 5s ease-out .2s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-05-31
hamsecret

过渡函数 transition-timing-function -webkit-transition-timing-function:linear; transition-timing-function:linear;

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2015-05-31
hamsecret

/*******指定有哪些CSS属性，需要动画效果，ALL代表全部指定的属性都加上动画效果*******/ -webkit-transition-property: all; transition-property: all; /*********指定动画过度效果的时间********/ -webkit-transition-duration:.5s; transition-duration:.5s; /*******指定动画过度的函数，一般就ease-in,ease-out*******/ -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; /***********下面是动画效果延时时间，就是指定多少秒后开始动画效果*************/ -webkit-transition-delay: .18s; transition-delay:.18s; /******以上这些其实都可以简写成下面这样,参数顺序分别是property,duration,timing-function,delay*********/ -webkit-transition:all .5s ease-in .18s; transition:all .5s ease-in .18s; CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-05-31
hamsecret

matrix（）变换 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置；

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-05-31
hamsecret

位移translate 未知宽度和高度的元素的水平垂直居中 top:50%; left:50%; border-radius: 5px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-05-31
hamsecret

scale 缩放可以（x,y） -webkit-transform:scale(0.8); -moz-transform:scale(0.8); transform:scale(0.8);

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-05-31
hamsecret

扭曲可以写x和y方向的skew(x,y)

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-05-31
hamsecret

扭曲 -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform:skew(-45deg);

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-05-31
hamsecret

旋转 -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform:rotate(20deg);

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2015-05-31

首页上一页 925 926 927 928 929 930 931 下一页尾页

0/150

提交

取消

开始学习

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

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