-
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间查看全部
-
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。查看全部
-
CSS3 跨列设置column-span column-span: none | all查看全部
-
CSS3 多列布局——column-count column-count：auto | <integer> 取值说明： 属性值 属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。 例如：将列分成四列显示，代码如下： column-count:4;查看全部
-
CSS3 多列布局——Columns 语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。 参数 参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;查看全部
-
任务 1、通过CSS3的@font-face属性引入本地字体 2、调用自定义的字体 3、设置3D舞台布景 4、给3D舞台布景设置过渡动画效果 5、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果 6、给3D舞台中“.three-d-box”设置过渡与变形效果 7、给导航设置3D前，与3D后变形效果 8、设置导航当前状态与悬浮状态下的背景效果 9、显示下拉导航菜单，并其设置一个变形效果 ?不会了怎么办 提示1： 使用@font-face引入本地字体，本地字体的路径为： http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu 同时提供自定义字体： “sansation_regular-webfont.eot”、“sansation_regular-webfont.woff”、“sansation_regular-webfont.ttf”和“sansation_regular-webfont.svg” 提示2： 通过font-family调用自定义的字体名“sansationregular”。 提示3： 在元素”.three-d”上使用“perspective”给元素设置3D舞台布景，并且将其值设置为”200” 提示4： 通过transition给3D舞台设置过渡动画，设置的参数为所有属性“all”,过渡时间持续“0.07s”，使用的过渡函数为“linear”。 提示5： 给不是当前状态的3D舞台的悬浮与聚焦状态设置旋转效果，也就是“.three-d:not(.active):hover”和“.three-d:not(.active):focus”状态下的“.three-d-box”设置z轴位移“-25px”，X轴旋转“90deg”。 提示6： 给3D舞台中的“.three-d-box”元素设置过渡效果，并且对其Z设置一个“-25px”旋转。 提示7： 在.front”元素上设置X轴的旋转，旋转度为0，同时给Z轴位移25px。另外给“.back”元素上设置X轴的旋转，旋转度为-90deg，同时Z轴位移25px。 提示8： 通过CSS的渐变与背景尺寸实现导航当前状态与悬浮状态下的斑纹背景效果。查看全部
-
位移 translate() translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动）查看全部
-
缩放 scale() 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）查看全部
-
CSS3中设置动画播放次数 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-前缀！查看全部
-
CSS3中设置动画开始播放的时间 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; }查看全部
-
CSS3中设置动画播放方式 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>)]*查看全部
-
CSS3中设置动画播放时间 animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒 语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。查看全部
-
CSS3中调用动画 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-。查看全部
-
过渡延迟时间 transition-delay查看全部
-
案例展示： 在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。 HTML代码: <div></div> CSS代码: div { width: 200px; height: 200px; background: red; margin: 20px auto; -webkit-transition-property: -webkit-border-radius; transition-property: border-radius; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-delay: .2s; transition-delay: .2s; } div:hover { border-radius: 100%; }查看全部
举报
0/150
提交
取消