慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

犀利一下下

实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。多做一些例子分析后可以掌握boder-radius的基本用法：按照顺时针的顺序，从左上角→左下角设置了值以后，原图形就从该角钝化（就是从该角处圆化，圆的半径就是设置的值，当设置的半径超过边长的一半时，自动以边长一半作为半径）

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-10-01
kingry

@import url("http://www.w3cplus.com/demo/css3/base.css");这句话有什么用？？这个是基本的reset样式，在实际项目中基本上都会使用这种类似的样式文件，因为复用性比较高，所以单独写成了一个文件。 -webkit-transform: translateZ(-25px) rotateX(90deg); 这两个前后位置影响翻转效果。顺序不一样效果不同。

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2018-03-22
chy_zsy

Keyframes颜色渐变介绍

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-09-30
kingry

perspective:透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置： a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。 b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。在chrome中有一个问题，那就是perspective一定要在rotateY（或rotateX）的前面。否则perspective的设置会无效。

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-09-30
kingry

backwards跟none有什么区别？关于backwards和none的区别： backwards会在动画开始前显示动画的第一帧，例如当动画是在页面加载完成后5秒开始，动画是由红色渐变为绿色，而div本来的背景色是黑色。那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色，而设置none的话，前五秒会div会显示自己的背景色黑色。

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-09-30
丨汧心忄夬泺

不依赖js，点击小图切换大的背景图

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-09-30
kingry

设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwards和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。例如：让动画停在最一帧处。代码如下： animation-fill-mode:forwards;

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-09-30
kingry

设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。例如，页面加载时，动画不播放。代码如下： animation-play-state:paused;

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-09-30
kingry

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。注释：如果把动画设置为只播放一次，则该属性没有效果。

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2018-03-22
adamyolo

将初始background设置为orange，姑且把这一帧叫做初始帧动画里面的red为第一帧，blue为最后一帧。将duration调短为5s，将delay调长为3s。下面就可以开始试了： 1. none：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，跳回到初始帧orange。 2. forwards：从初始帧orange开始，延迟3s后开始播放动画 red-->blue，动画完成后，留在最后一帧blue. 3. backwards : 也是从初始帧orange开始，但是由于会迅速应用动画的第一帧，所以延迟没有用了，立马就闪到了第一帧red。动画完成后，跳回到初始帧orange。 4. both：同时具有forwards和backwards效果，即拥有forwards动画结束留在最后一帧blue的效果，也拥有迅速应用动画的第一帧red的效果。这样both综合的效果为：从初始帧orange开始，迅速跳到第一帧red，然后变化到最后一帧blue结束，并留在最后一帧blue。

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2018-03-22
kingry

设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-09-30
kingry

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

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2018-03-22
kingry

设置动画开始播放的时间 animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]* 案例演示：浏览器渲染样式之后2S之后触发move动画。 HTML: <div><span></span></div> CSS: @keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 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中设置动画开始播放的时间
2018-03-22
kingry

设置动画播放方式 animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。 cubic-bezier bezier n. 贝塞尔曲线；贝齐尔 cubic英 ['kjuːbɪk]美 ['kjubɪk] adj. 立方体的，立方的

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2018-03-22
kingry

设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。案例演示：制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。 HTML: <div>Hover Me</div> CSS: @keyframes toradius{ from { border-radius: 0; } to { border-radius: 100%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; } div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; }

查看全部

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

首页上一页 750 751 752 753 754 755 756 下一页尾页

0/150

提交

取消

开始学习

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

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