慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

椰奶清补凉

1.在用background:linear-gradient设置导航分隔线时，一定要设置宽高，不然显示不了 2.伪元素：li:after，在用其添加分割线时，必须设置content:""; 3.最后一个孩子的伪元素：li:last-child:after

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
really4you

background-clip和background-origin一样，都是表示从那个位置开始（border，padding，content）不同的一个是裁剪一个是显示图片起始位置

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-05-10
serena_mc

总结下，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中设置动画播放时间
2016-05-10
serena_mc

设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

查看全部

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

调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

查看全部

0 采集收起来源：CSS3中调用动画
2016-05-10
serena_mc

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。 Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

查看全部

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

动画--过渡延迟时间 transition-delay transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-05-10
serena_mc

动画--过渡函数 transition-timing-function transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： ease 默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢 linear 元素样式从初始状态过渡到终止状态，速度是恒速 ease-in 元素样式从初始状态过渡到终止状态时速度越来越快，呈现一种加速状态，常称这种效果为渐显效果 ease-out 元素样式从初始状态过渡到终止状态时速度越来越慢，呈现一种减速状态，常称这种效果为渐隐效果 ease-in-out 元素样式从初始状态过渡到终止状态，先加速再减速，常称这种效果为渐显渐隐效果

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2016-05-10
serena_mc

动画--过渡所需时间 transition-duration transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2016-05-10
serena_mc

动画--过渡属性 transition-property 简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2016-05-10
serena_mc

变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-05-10
serena_mc

变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。 matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-05-10
Memory丶记忆

所有CSS3代码都得加上内核..

查看全部

0 采集收起来源：CSS3中设置动画播放方式
2016-05-10
serena_mc

变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动）不知道div的宽高，让div水平垂直都居中的方法是transform:translate(-50%,-50%);

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-05-10
serena_mc

变形--缩放 scale() 缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）例如： div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); } 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

查看全部

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

首页上一页 533 534 535 536 537 538 539 下一页尾页

0/150

提交

取消

开始学习

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

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