慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_伯伯伯亮_0

总结下，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-04-17
qq_伯伯伯亮_0

@keyframes around{ 0% { transform: translateX(0); } 25%{ transform: translateX(180px); } 50%{ transform: translate(180px, 180px); } 75%{ transform:translate(0,180px); } 100%{ transform: translateY(0); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite; } 对于animation那些变化的属性 translate之类的可以利用之前所学的变形与动画的效果 scale缩放 skew扭曲 rolate旋转的效果

查看全部

0 采集收起来源：CSS3中调用动画
2017-04-17
qq_伯伯伯亮_0

Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键帧。开始，结束。 Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键帧。 animation-iteration-count属性定义动画的播放次数。语法 animation-iteration-count: n|infinite; 值描述 n 定义动画播放次数的数值。 infinite 规定动画应该无限次播放。 1 默认值 Transition与Animation: transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

查看全部

0 采集收起来源：CSS3中调用动画
2017-04-17
qq_伯伯伯亮_0

CSS3 Keyframes介绍 Keyframes被称为关键帧，主要以@keyframes开头，后面紧接着动画名称加上以对花括号{...} 其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。 @keyframes wobble { 0% { margin-left: 100px; background:green; } 40% { margin-left:150px; background:orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } div:hover{ animation: wobble 5s ease .1s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2017-04-17
qq_伯伯伯亮_0

animation-name: myMove; 规定@keyframes动画的名称 animation-duration: 3s; 规定动画完成一个周期所花费的秒或毫秒 animation-timing-function: step-end; 规定动画的速度曲线 step-start 马上跳转到动画结束状态 step-end 保持动画开始状态，直到动画执行时间结束，马上跳转到动画结束状态 animation-delay: 3s; 规定动画何时开始。默认是0 animation-iteration-count: 3; 规定动画被播放的次数。默认是1 infinite 指定动画应该播放无限次 animation-direction: alternate; 定义是否循环交替反向播放动画。默认“normal” reverse 动画反向播放 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放 animation-play-state: running; 动画的播放状态 paused 指定暂停动画 running 指定正在运行的动画 animation-fill-mode：属性定义在动画开始之前和结束之后发生的操作。 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。 @keyframes是关键帧创用百分比来规定变化发生的时间 @keyframes myMove{ 0%{ background: red; } 100%{ background: green; } } 在@keyframes中，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2017-04-17
qq_伯伯伯亮_0

CSS3变形 1·旋转 rotate() transform: rotate(45deg); 2·扭曲 skew() skew(x,y)使元素在水平和垂直方向同时扭曲第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 transform:skew(45deg); 3·缩放 scale() scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 transform: scale(1.5,0.5); 4·-位移 translate() transform: translate(50px,100px); 5·原点 transform-origin 改变原点位置 transform-origin: left top; 6·过渡属性 transition-property transition-property指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间例如：设置高度变形，持续过程1s，方式是慢结束，延迟时间是0.2s transition-property: height; transition-duration: 1s; transition-timing-function: ease-out; transition-delay: .2s; 缩写为：transition：height 1s ease-out .2s；

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2017-04-17
qq_伯伯伯亮_0

transition-property: 属性width height background color...这些是过渡函数变化的属性，是过渡变化的 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。越来越快 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。越来越慢 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。先加速再减速 linear 恒速

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-04-17
qq_面朝大海_18

******

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-04-16
qq_面朝大海_18

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2017-04-16
qq_面朝大海_18

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

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2017-04-16
qq_面朝大海_18

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

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2017-04-16
qq_面朝大海_18

**********

查看全部

0 采集收起来源：切换背景图像综合练习题
2017-04-16
十年梦丶

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2017-04-16
qq_面朝大海_18

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
qq_面朝大海_18

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2017-04-15

首页上一页 254 255 256 257 258 259 260 下一页尾页

0/150

提交

取消

开始学习

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

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