来自 Web前端 2020-04-29 15:34 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

咱们利用Animation就会创建和睦想要的有个别动漫

时间: 2019-12-20阅读: 88标签: 视觉创建一个 CSS 线性渐变

css3动画animation,css3animation

随着对html5和css3的运用普及, 页面中的简单动画 也随之常见,animation就被常用,我们运用Animation就能创建自己想要的一些动画效果了。

建议: 如果想要制作简单的不细致的动画效果 animation可以首选,比较好的动画,还是使用flash或js/jquery比较好。

澳门三合彩票 1

 一、Keyframes 关键帧  

   在开始介绍Animation之前我们有必要先来了解一下"Keyframes",叫做“关键帧”。 @keyframes开头,后面紧接着是这个“动画的名称”加上一对花括号"{}"

  使用@keyframes规则,你可以创建动画。 创建动画是通过逐步改变从一个CSS样式设定到另一个。

    在动画过程中,您可以更改CSS样式的设定多次。

     指定的变化时发生时使用%,或关键字"from"和"to",与0%到100%相同。
     0%是开头动画,100%是当动画完成(中间可以在多次定义)。

    写法 @keyframes  定义的名称{

           0%(from){定义的样式,其他}

         100%(to){定义的样式,其他}

    }

   兼容:  @ -浏览器号-keyframes  定义的名称{

           0%(from){定义的样式,其他}

         100%(to){定义的样式,其他}

    }

egg:   @keyframes moves{

         0% {background-position: 0 0;}
         50% {background-position: -180px 0;}
         100% {background-position: 0 0;}

}

二、animation的动画属性

 (1)animation-name   规定需要绑定到选择器的 keyframe 名称
 (2)animation-duration  规定完成动画所花费的时间,以秒或毫秒计
 (3)animation-timing-function 规定动画的速度曲线。如linear直线。
 (4)animation-delay 规定在动画开始之前的延迟。
 (5)animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字,可以让动画无限次播放。
 (6)animation-direction 规定是否应该轮流反向播放动画,
 (7)animation-fill-mode 动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用其属性令其为forwards。
 (8)animation-play-state:  如果鼠标移走,色块立刻回到动画开始状态。如果想让动画保持突然终止时的状态,则该属性值为paused 设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停

egg:   .demo{
       width: 50px;
       height: 50px;
       background: blue;
       -webkit-animation-name:'moves';/*动画属性名,也就是我们前面keyframes定义的动画名*/
       -webkit-animation-duration: 10s;/*动画持续时间*/
       -webkit-animation-timing-function: ease-in; /*动画频率*/
       -webkit-animation-delay: 2s;/*动画延迟时间*/
       -webkit-animation-iteration-count: 10;/*定义循环次数,infinite为无限次*/
       -webkit-animation-direction: alternate;/*定义动画方式*/
  }

为了方便可以简写 规格如下:

    animation: name  duration  timing-function  delay  iteration-count  direction  play-state  fill-mode;

    egg: animation: moves 10s ease-in 2s 10 alternate 

三、animation各属性讲解

   (1)animation-name 属性为 @keyframes 动画指定名称

      语法: animation-name: *keyframename*|none;

       澳门三合彩票 2

    egg:    animation-name:mymove;

               -webkit-animation-name:mymove;

   (2)animation-duration 设置对象动画的播放持续时间    值单位可以是秒(s)或毫秒(ms)**

**      语法: animation-duration: **time;

**        澳门三合彩票 3


 (3)animation-timing-function 规定动画的速度曲线 (动画播放时的运动方式

       animation-timing-function使用的数学函数,称为三次贝塞尔曲线,速度曲线。使用此函数,您可以使用您自己的值,或使用预先定义的值之一:

    澳门三合彩票,语法:animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<num1>, <num2>, <num3>, <num4>)

     澳门三合彩票 4

  egg:  自定义     .demo { animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定义的贝塞尔曲线*/ }

   (4)animation-delay 规定在动画开始之前的延迟(几秒后开始执行动画)。

      语法:animation-delay: time;

        澳门三合彩票 5

    egg:   .demo {

                 animation-delay:2s;/*动画将于2s后执行*/

            }

     (5)animation-iteration-count 规定动画应该播放的次数。 加入infinite关键字,可以让动画无限次播放。

        语法: animation-iteration-count: n | infinite

          澳门三合彩票 6

    (6)animation-direction 规定是否应该轮流反向播放动画

           注意:如果动画被设置为只播放一次,该属性将不起作用

       语法:animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

         澳门三合彩票 7

     (7)animation-fill-mode 动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,需要使用其属性令其为forwards。

        语法:animation-fill-mode: none | forwards | backwards | both

          澳门三合彩票 8

    (8)animation-play-state: 用来控制元素动画的播放状态

        语法:animation-play-state: paused | running(默认)

         澳门三合彩票 9

 

下面给看几个做的demo: --简单粗糙

  1、人物图片 走动效果(一个走动,一个跳跃,一个高尔夫挥球)

澳门三合彩票 10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎访问 http://www.cnblogs.com/wuchuanlong/</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" >

<style>  
/*move_img.png上面有 几个小图  它的移动位置是100除以几 约等(=)差%,后面的移动位置即加差(间隔距离要一样) 知道总和100% 一个循环*/  
body{  font-family: "Microsoft YaHei"; background-color:#9BD2FF }
.elepent_mid{ margin:0 auto; width:580px; position:relative;}
.move_go{ 
   background:url(move_01.png) no-repeat; width:180px; height: 300px; position:absolute; 
    border:1px solid red; 
   animation:chan_run 1s step-start infinite;
   -moz-animation:chan_run 1s step_start infinite;
   -webkit-animation:chan_run 1s step_start infinite;
 }
 @keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-moz-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }
  @-webket-keyframes chan_run{
    0% {background-position: 0 0;}
    14.3% {background-position: -180px 0;}
    28.6% {background-position: -360px 0;}
    42.9% {background-position: -540px 0;}
    57.2% {background-position: -720px 0;}
    71.5% {background-position: -900px 0;}
    85.8% {background-position: -1080px 0;}
    100% {background-position: 0 0;}
  }

 /*第二个原地移动*/
 .secd_yidong{ 
   background:url(pepel_02.png) no-repeat; height:319px; width:150px; position:absolute; top:320px;
   animation:move_two 3s step-start infinite;
   -moz-animation:move_two 3s step-start infinite;
   -webkit-animation:move_two 3s step-start infinite;
  }
  @keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0 0}
  }
  @-webkit-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }
   @-moz-keyframes move_two{
    0%{ background-position:0 0;}
    25%{ background-position:-150px 0}
    50%{ background-position:-300px 0}
    75%{ background-position:-450px 0}
    100%{ background-position:0px 0}
  }

   /*第三个原地移动*/
 .third_03{ 
  background:url(jump_03.png) no-repeat; height:131px; width:61px; position:absolute; top:320px; left:240px; right:0; bottom:0;
   animation:move_03 1s step-start infinite; overflow:hidden;
   -moz-animation:move_03 1s step-start infinite;
   -webkit-animation:move_03 1s step-start infinite;
  }
  @keyframes move_03{
    0%{ background-position:65px 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-moz-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
   @-webkit-keyframes move_03{
    0%{ background-position:0 0;}
    11.1%{ background-position:-65px 0}
    22.2%{ background-position:-130px 0}
    33.3%{ background-position:-195px 0}
    44.4%{ background-position:-270px 0}
    55.5%{ background-position:-335px 0;}
    66.6%{ background-position:-400px 0}
    77.7%{ background-position:-465px 0}
    88.8%{ background-position:-530px 0}
    99.9%{ background-position:-595px 0}
    100%{ background-position:0 0}
  }
</style>
</head>
<body>
 <div class="elepent_mid">
  <!--第一个-->
   <div class="move_go"></div>
  <!--第二个移动-->
  <div class="secd_yidong"></div>
  <!--第三个移动-->
  <div class="third_03"></div>
 </div>
</body>
</html>

View Code

 澳门三合彩票 11

 

2、360度 一直旋转 鼠标悬停放大

 澳门三合彩票 12

澳门三合彩票 13

 1  .animation{ width:150px; height:145px; position:relative; margin:0 auto; transition:all 0.5s linear}
 2  .animation p{ background:url(d_03.png) no-repeat; width:150px; height:145px; cursor:pointer; animation:anita 2s linear 1s infinite; -webkit-animation:anita 2s linear 1s infinite}
 3  .animation span{ display:block; text-align:center; position:absolute; left:0%; right:0; top:38%; bottom:0; margin:auto}
 4  .animation:hover{ color:red; transform:rotate(360deg) scale(1.2)}
 5  @keyframes anita{
 6     0%{ transform:rotate(0deg);}
 7     100%{transform:rotate(360deg);}
 8   }
 9   @-webkit-keyframes anita{
10     0%{ transform:rotate(0deg)}     
11     100%{ transform:rotate(360deg)}     
12   }
13 <!--animation 动画-->
14   <div class="animation">
15     <p></p>
16     animation<Br />动画
17   </div>

View Code

 澳门三合彩票 14

3、类似 ---移动的星星

澳门三合彩票 15

 1  /*移动的星星 animation*/
 2  @keyframes star_yidong{
 3    0 %{ background-position:0% 0%; background-color:#fff;}
 4    50 %{ background-position:50% 0%; background-color:#CCC;}
 5    100%{ background-position:100% 0%; background-color:#000;}     
 6  }
 7 @-webkit-keyframes star_yidong{
 8    0 %{ background-position:0% 0%; background-color:#fff;}
 9    50 %{ background-position:50% 0%; background-color:#CCC;}
10    100%{ background-position:100% 0%; background-color:#000;}     
11  }
12  @-moz-keyframes star_yidong{
13    0 %{ background-position:0% 0%; background-color:#fff;}
14    50 %{ background-position:50% 0%; background-color:#CCC;}
15    100%{ background-position:100% 0%; background-color:#000;}     
16  }
17  @-o-keyframes star_yidong{
18    0 %{ background-position:0% 0%; background-color:#fff;}
19    50 %{ background-position:50% 0%; background-color:#CCC;}
20    100%{ background-position:100% 0%; background-color:#000;}     
21   }
22 .move_star{ position:relative; width:100%; height:600px; margin:0 auto; margin-top:20px}
23 .star_01{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto}
24  #xing01{ 
25   background:url(img/background.png) repeat;  z-index:4;
26   animation:star_yidong 60s linear infinite; 
27   -webkit-animation:star_yidong 60s linear infinite;
28   -moz-animation:star_yidong 60s linear infinite;
29   -o-animation:star_yidong 60s linear infinite;
30  }
31  #xing02{ 
32   background:url(img/foreground.png) repeat; z-index:4; 
33   animation:star_yidong 80s linear infinite; 
34   -webkit-animation:star_yidong 80s linear infinite;
35   -moz-animation:star_yidong 80s linear infinite;
36   -o-animation:star_yidong 80s linear infinite;
37  }
38  #xing03{
39     background:url(img/midground.png) repeat; z-index:4;
40     animaition:star_yidong 100s ease-in infinite;
41     -webkit-animation:star_yidong 100s ease-in infinite;
42     -moz-animation:star_yidong 100s ease-in infinite;
43     -o-animation:star_yidong 100s ease-in infinite;
44  }
45 /*闪动的星星*/
46  #xing04{
47     background:url(img/stars.png) repeat; z-index:4;
48  }
49  #xing05{
50      background:url(img/twinkling.png) repeat; z-index:4;
51      animaition:move-twink-back 200s linear infinite;
52     -webkit-animation:move-twink-back 200s linear infinite;
53     -moz-animation:move-twink-back 200s linear infinite;
54     -o-animation:move-twink-back 200s linear infinite;
55   }
56   @keyframes move-twink-back {
57     from {background-position:0 0;}
58     to {background-position:1000px 5000px;}
59 }
60 @-webkit-keyframes move-twink-back {
61     from {background-position:0 0;}
62     to {background-position:1000px 5000px;}
63 }
64 @-moz-keyframes move-twink-back {
65     from {background-position:0 0;}
66     to {background-position:1000px 5000px;}
67 }
68 <!--移动的星星-->
69   <div class="move_star">
70     <div id="xing01" class="star_01"></div>
71     <div id="xing02" class="star_01"></div>
72     <div id="xing03" class="star_01"></div>
73     <!--闪动的星星-->
74     <div id="xing04" class="star_01"></div>
75     <div id="xing05" class="star_01"></div>
76   </div>

View Code

 

学无止境,乐在其中

css参考手册:

属性借鉴来源:     

 

随着对html5和css3的运用普及, 页面中的简单动画 也随之常见,animation就被常用,我们运用Animation就能创建自己...

HTML元素的背景色并不局限于单色。css还提供了颜色过渡,也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变,下面是它的语法:

background:linear-gradient(gradient_direction,颜色1,颜色2,颜色3,...)

第一个参数指定了颜色过渡的方向-它的值是角度,90deg代表垂直渐变,45deg的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序:

例子:

background:linear-gradient(90deg,red,yellow,rgb(204,204,255));

使用 CSS 线性渐变创建条纹元素

repeating-linear-gradient()函数和linear-gradient()很像,主要区别就是repeating-linear-gradient()有很多参数,为了便于理解,只用到角度值和起止渐变颜色值。

角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值,由颜色值和起止位置组成,起止位置用百分比或者像素值表示。

例子:渐变开始于0像素位置的yellow,然后过渡到距离开始位置40像素的blue。由于下一个起止渐变颜色值的起止位置也是40像素,所以颜色直接渐变成第三个颜色值green,然后过渡到距离开始位置80像素的red

repeating-linear-gradient( 45deg, yellow 0px, blue 40px, green 80px)repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px )

如果每对起止渐变颜色值的颜色都是相同的,由于是在两个相同的颜色间过渡,那么中间的过渡色也为同色,接着就是同色的过渡色和下一个起止颜色,最终产生的效果就是条纹

通过添加细微图案作为背景图像来创建纹理

添加一个精致的背景图,可以增加页面的质感,让页面更美观。关键是要找到一个平衡点,抢了内容的风头,宣兵夺主可就不妙了。

background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内,一般会用引号抱起来

用body选择器设置整个页面的background为url (指定的图片。)

body{ background:url();}

使用 CSS Transform scale 属性可以更改元素的大小

css属性transform里面的scale()函数,可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了2倍:

p{ transform:scale(2); //scale() 调整元素的缩放比例}

使用CSS Transform scale 属性在悬停时缩放元素

transform属性有很多函数,可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 :hover时,transform属性可以方便的给元素添加交互

下面是当用户悬停段落元素时,段落大小缩放到原始大小2.1倍的例子:

p:hover{ transform:scale(2.1); //缩放比例为2.1}

使用 CSS Transform skex 属性沿X轴倾斜元素

接下来要介绍的transform属性是skewX,skewX使选择的元素沿着X轴(横向)翻转指定的角度。

下面的代码沿着X轴翻转段落元素-32度

p{ transform:skewX(-32deg);//沿着X轴旋转-32度}

使用 CSS 创建一个图形

术语表:

blur-radius = 模糊半径,

spread-radius = 辐射半径,

transparent = 透明的,

border-radius = 圆角边框

通过使用选择器选择不同的元素并改变其属性,你可以创造一些有趣的形状。

比如新月:你可以使用box-shadow属性来设置元素的阴影,border-radius属性控制元素的圆角边框。

首先你将会创建一个圆的、透明的对象,它具有模糊阴影并略微向两边递减。如你所见,这个阴影其实就是新月形状。

为了创建一个圆形的对象,border-radius应该被设置成50%。

你应该还记得之前关卡的box-shadow属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius和颜色值。其中blur-radius和spread-radius是可选的。

box-shadow:offset-x offset-y blur-radius spread-radius color;box-shadow:25px 10px 0px 0px yellow;

style.content{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; height:100px; width:100px; background-color:transparent; //原图形透明 border-radius:50%;盒子的圆滑度 box-shadow:25px 10px 0px 0px blue;}/stylediv /div

使用 CSS 和 HTML 创建更复杂的形状

世界上最流行的形状非心形莫属,用纯CSS创建一个心形。需要先了解 :before和 :after伪类。

这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里,:before伪类元素用来给class为heart的元素添加一个正方形

.heart{ position:absolute; margin:auto; top:0; bottom:0; right:0; left:0; width:50px; height:50px; background-color:pink; transform:rotate(-45deg);}.heart:before{ content:""; background-color:pink; border-radius:50%; position:absolute; height:50px; width:50px; bottom:25px; left:0px;}.heart:after{ content:""; background-color:pink; border-radius:50%; position:absolute; height:50px; width:50px; top:0px; right:25px;}

:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或文字。

当:before和:after伪类用来添加某些形状而不是图片或文字时,content属性仍然是必须的,但是它的值可以是空字符串。

在上面的例子,class为heart元素的:before伪类添加了一个粉色的正方形,正方形的height和width分别为50px。由于设置了其边框半径为50%,所以正方形为圆形,同时其相对位置为距离left0px,以及向top偏移25px。

class为heart元素的:after伪类添加了一个粉色的正方形,正方形的height和width分别为50px。由于设置了其边框半径为50%,所以正方形为圆形,同时其相对位置为距离left 0px,bottom偏移25px

了解 CSS 的关键帧和动画是如何工作的

如果要给元素添加动画,你需要了解animation属性以及@keyframes规则。

animation属性控制动画的外观,@keyframes规则控制动画中各阶段的变化。总共有8个animation属性。

animation-name设置动画的名称,也就是要绑定的选择器的@keyframes的名称animation-duration设置动画所花费的时间animation-fill-mode:forwards; 设置动画结束始终高亮animation-iteration-count:infinite;设置动画播放次数,infinite无限循环播放

@keyframes能够创建动画。创建动画的原理是将一套css样式逐渐变化为另一套样式。具体是通过设置动画期间对应的frames的css的属性,以百分比来规定改变的时间,或者通过关键词 from 和 to,等价于0%和100%。打个比方,css里面的0%属性就像是电影的开场镜头。css里面的100%属性就是元素最后的样子,相当于电影里面的片尾。css在对应的时间内给元素过渡添加效果。

opacity:0.1;设置动画元素隐身度

stylediv{ height:40px; width:70%; background:black; margin:50px auto; border-radius:5px;}#rect{ animation-name:rainbow; animation-duration:4s;}@keyframes rainbow{ 0%{ background-color:blue; } 50%{ background-color:green; } 100%{ background-color:yellow; }}/stylediv /div

使用CSS动画更改按钮的悬停状态

你可以在按钮悬停时使用@keyframes改变按钮的颜色

本文由澳门三合彩票发布于Web前端,转载请注明出处:咱们利用Animation就会创建和睦想要的有个别动漫

关键词: