深层次CSS3 动漫实际效果的总结详解

日期:2021-03-10 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

CSS3加上了几个动漫实际效果的特性,根据设定这些特性,能够做出1些简易的动漫实际效果而不必须再去依靠JavaScript。CSS3动漫的特性关键分成3类:transform、transition和animation。

transform

rotate

设定元素顺时针转动的角度,用法是:

transform: rotate(x);

主要参数x务必是以deg末尾的角度数或0,可为负数表明反方向。

scale

设定元素变大或变小的倍数,用法包含:

transform: scale(a);                  元素x和y方位均放缩a倍

transform: scale(a, b);              元素x方位放缩a倍,y方位放缩b倍

transform: scaleX(a);                元素x方位放缩a倍,y方位不会改变

transform: scaleY(b);                元素y方位放缩b倍,x方位不会改变

translate

设定元素的位移,用法为:

transform: translate(a, b);                元素x方位位移a,y方位位移b

transform: translateX(a);                  元素x方位位移a,y方位不会改变

transform: translateY(b);                  元素y方位位移b,x方位不会改变

skew

设定元素歪斜的角度,用法包含:

transform: skew(a, b);              元素x方位逆时针歪斜角度a,y方位顺时针歪斜角度b

transform: skewX(a);                元素x方位逆时针歪斜角度a,y方位不会改变

transform: skewY(b);                元素y方位顺时针歪斜角度b,想方位不会改变

以上的主要参数均务必是以deg末尾的角度数或0,可为负数表明反方向。

matrix

设定元素的形变引流矩阵,由于引流矩阵形变过度繁杂,暂略。

origin

设定元素的悬架点,用法包含:

transform-origin: a b;                元素的悬架点为(a, b)

元素的悬架点即为它转动和歪斜时的管理中心点。赋值中的a、b能够是长度值、以%末尾的百分比或left、top、right、bottom4个值。

transition

transition-property

特定transition实际效果功效的CSS特性,其值是CSS特性名。

transition-duration

动漫实际效果不断的時间,其值为以s末尾的秒数。

transition-timing-function

特定元素情况的转变速度涵数,其赋值根据贝赛尔曲线图涵数,详细信息以下所示:


transition-delay

动漫实际效果延迟刚开始实行的時间,其值为以s末尾的秒数。

CSS3动漫的性命周期以下图所示,从中能够清晰的看出duration和delay之间的关联:



animation

CSS3中真实的动漫特性是animation,而前面的transform和transition都只是对DOM元素的形变或是情况的过渡。具体上,CSS3所适用的动漫实际效果只是填充动漫,也便是说先设置全部动漫性命周期中的几个重要情况(key  frame,重要帧),随后动漫将自主测算并仿真模拟重要帧之间的过渡。那末在设定animation的特性以前就务必先设置好重要帧了。

重要帧@keyframes的英语的语法构造以下:

@keyframesNAME {

         a% {

         /*CSS特性*/

         }

         b% {

                  /*CSS特性*/

         }

         ...

}

NAME表明动漫的姓名;a%、b%表明以百分号末尾的百分数,用于设置该重要帧在动漫性命周期中的部位;百分数后边的{ } 中则必须写成该重要帧情况下CSS特性的值。此外,假如同1个百分标值在@keyframes中出現数次,那末后出現的将遮盖先出現的;而且重要帧在@keyframes中时无序的。

设定完重要帧后便可以再次设置animation了。

animation-name

特定采用的动漫的姓名,即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

设置动漫实行的次数,其值能够是数据还可以是infinite(循环系统实行)。

animation-direction

设置动漫实行的方位,其值能够是normal(一切正常次序播发)或alternate(反方向播发)。

前缀

由于CSS3都还没宣布公布,因此各种各样访问器对它的适用也不尽同样。因此在设定CSS3特性(包含@开始的新特性)的情况下一般必须对其加上访问器标志的前缀,如-webkit- 表明Webkit核心的访问器Chrome和Safari,-moz- 表明Fire Fox,-o- 表明Opera。疏忽IE吧,在IE上的完成一般還是要用到滤镜,而并不是CSS3。

案例

下面的编码仿真模拟了上述绝大多数的CSS3动漫特性,因为只应用了–webkit- 前缀,因此只能在Chrome或Safari下一切正常运作。

HTML编码:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>CSS3动漫</title>
<link type="text/css" rel="stylesheet" href="animation.css" />
</head></p> <p><body>
<div class="rotate">rotate</div>
<div class="scale">scale</div>
<div class="translate">translate</div>
<div class="skew">skew</div>
<div class="origin">origin</div>
<div class="single">single property</div>
<div class="whole">whole property</div>
<div class="resume">change & resume</div>
<div class="animation">animation</div>
</body>
</html>&nbsp;


CSS编码:

animation.css


拷贝编码
编码以下:

div {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: #06F;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 10px;
margin: 5px;
}</p> <p>.rotate {
-webkit-transform: rotate(0deg);
}</p> <p>.rotate:hover {
-webkit-transform: rotate(90deg);
}</p> <p>.scale {
-webkit-transform: scale(1);
}</p> <p>.scale:hover {
-webkit-transform: scale(1.5);
}</p> <p>.translate {
-webkit-transform: translate(0px, 0px);
}</p> <p>.translate:hover {
-webkit-transform: translate(50px, 50px);
}</p> <p>.skew {
-webkit-transform: skew(0);
}</p> <p>.skew:hover {
-webkit-transform: skewY(20deg);
}</p> <p>.origin {
-webkit-transform-origin: top left;
-webkit-transform: rotate(0);
}</p> <p>.origin:hover {
-webkit-transform: rotate(45deg);
}</p> <p>.single {
width: 150px;
}</p> <p>.single:hover {
background: #f00;
width: 200px;
height: 100px;
line-height: 100px;
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
}</p> <p>.whole {
width: 150px;
}</p> <p>.whole:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}</p> <p>.resume {
width: 150px;
-webkit-transition-duration: 2s;
}</p> <p>.resume:hover {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
-webkit-transition-duration: 2s;
}</p> <p>.animation:hover {
-webkit-animation-name: anim;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}</p> <p>@-webkit-keyframes anim {
0% {
width: 80px;
height: 30px;
line-height: 30px;
background: #06F;
}
50% {
width: 140px;
height: 65px;
line-height: 65px;
background: #360;
}
100% {
width: 200px;
height: 100px;
line-height: 100px;
background: #f00;
}
}


上一篇:IE7一部分标识(span、input )设定text 返回下一篇:没有了