慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_相信自己_25

animation-delay用来控制动画播放的延迟时间。定义在浏览器开始执行动画之前等待的时间。 @keyframes move { 0%{ transform: translate(0); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:2s; animation-iteration-count:infinite; }

查看全部

0 采集收起来源：CSS3中设置动画开始播放的时间
2016-10-27
qq_相信自己_25

动画播放方式： animation-timing-function与transition-timing-function类似，变换方式也一样。还有一个cubi-bezier的变换方式。

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2016-10-27
qq_相信自己_25

animation-name属性与基本属性一样，但是动画名字必须与定义一致。不同浏览器要加上相应的前缀。

查看全部

0 采集收起来源：CSS3中调用动画
2016-10-27
qq_相信自己_25

@keyframes是动画中的关键帧，与动画的各个属性一起使用。 @keyframes wobble { 0% { margin-left: 100px; background:green; } 100% { margin-left: 100px; background: red; } } div { width: 100px; height: 100px; background:red; color: #fff; } div:hover{ animation: wobble 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-10-27
qq_相信自己_25

延迟时间transition-delay跟transition-duration属性用法类似。注意其联写的样式： transition: all .5s ease-in .2s;

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-10-27
qq_相信自己_25

图表中的ease-out的曲线是错误的，大家注意。文字描述是正确的过渡函数transition-timing-function是动画的灵魂，主要包含五个常用的函数： ease 先快后慢 linear匀速 ease-in一直加速，又叫渐显效果 ease-out一直减速，又叫渐隐效果 ease-in-out先加速再减速

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2016-10-27
qq_相信自己_25

css动画部分 transition共有四个属性： transition-property：指定过度或者动态模拟的css属性 transition-duration：指定完成过度所需要的时间 transition-timing-function：指定过渡函数 transition-delay：指定开始出现的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-10-27
qq_相信自己_25

transform-origin是原点操作，其操作类似background 结合旋转变形移动等操作使用。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-10-27
qq_相信自己_25

矩阵matrix（）matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 a为元素的水平伸缩量，宽度比例，1为原始大小；b为纵向扭曲，上下倾斜，0为不变，1为2倍；c为横向扭曲，左右倾斜，0不变；d为垂直伸缩量，高度比例，1为原始大小；e为水平偏移量，x轴上左右位移，0是初始位置；f为垂直偏移量，y轴上下位移，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-10-27
qq_相信自己_25

translate(x,y)函数是用于元素移动的。注意x的正方向是右边，y的正方向是下。 translateX(x)

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-10-27
qq_相信自己_25

缩放变形scale（X，Y） Y可省略不写 transform：scale（1.5）；关于浏览器前缀：谷歌：-webkit- 火狐：-moz- ie：-ms-

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-10-27
qq_相信自己_25

css3中变形扭曲； skew（x,y）有三种情况， 1.x轴变形skewX（x） 2.y轴变形skewY（y） 3.xy轴变形skew（x,y）注意变形x y的方向是角度旋转的方向

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-10-27
qq_相信自己_25

css3旋转旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 div{-webkit-transform:rotate(45deg);transform:rotate(45deg)；}

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-10-27
qq_相信自己_25

蒙蔽了，这个案例需要收藏。作弊了

查看全部

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

Keyframes被称为关键帧,在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。思路：先设置@keyframes changecolor{}，然后设置div的宽高背景，字体颜色以及外边距。最后设置div:hover{},执行动画：animation：changecolor 5s ease-out .2s(具有兼容性)。注意：@keyframes 与 animition 后面的动画名保持一致（且有兼容性）注：transition:是css属性触发，animation：是调用相关函数时触发。注，@keyframes 函数名{}一般不可以放在CSS文件开头，因为CSS文本规定不可以以@符号开头。一般可以把其他样式提前放在CSS开头。注：FF46、IE11，如果元素没有设置border，动画里的border属性就无效。

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-10-27

首页上一页 373 374 375 376 377 378 379 下一页尾页

0/150

提交

取消

开始学习

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

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