css-单位%如泣如诉-background-size-background-position-遁地龙卷风

(-1)写在前面

     
我为此的凡chrome49,这篇是为连续做准备。重要性的调动和毕业资料的共同体招近年来不曾看JQuery和H5特效,以后只能晚上拘留了。

(-1)写以前方

  
我所以的凡chrome49,这个idea是我当stackoverflow上答应问题时观看了,多谢这员同行,加深了本人本着成千上万技术点的亮,最近恰巧到北京市,忙碌了一两天,在继续之光景里,会让布置面试,学习计划只得按工作流走了,做扫尾这个只要扣押一个特别酷的效力,好感动!

(0)准备

div长宽都为300px,我们同摆设大小小于div的图形1.jpg乎条例,将1.jpg安也背景图片,添加样式background-repeat:no-repeat

(0)效果演示

 

(1) background-size:100% 100%;

缩放背景图片大小, background-size:100%
100%;中的%号的基值分别是div宽度与惊人,所以图片会填充整个div。

(1)实现方案

卡通效果都是故animation做的

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图形及div水平、高度差之绝对化值,这里既垂直为条例,只举例正值。

(2)知识点详解

a.图片没有div大  

background-size:100% 80%;那么background-position:0%
10%底打算是如图片距div上边6px,计算办法吧(300-300*0.8)*0.1
=6,相当给往下推进图片,所以background-position:0%
100%;总是是图底部紧贴div底边

a. border-radius:40px;  

当div的丰富高都是80px之上,div是一个周,其实添加高都是60px之时段也是圆型,同理都是40、30吗是圆型,当然案例被无行使这种措施。具体落实以代码中证

b.图片和div一样大

background-size:100% 100%;这里无论background-position:0%
10%;中之10%设置为什么还没作用。

b. position:absolute;

当div使用此属性时,margin:0
auto凡无效的,小球使用了此特性,他的档次在中的贯彻方式以代码中证明

c.图片比div大

background-size:100% 120%,那么background-position:0%
10%打算是如果图片距离div上边-6px,计算办法是(300*1.2-300)*0.1 =
6,相当给向上推进图片。所以background-position:0%
100%;总是是图形底部紧贴div底边

c. animation:down 1.5s infinite alternate;

I.1.5s
是卡通片的持续时间,因为延迟时间出现在持续时间的后,所以只现出一个带s的参数是持续时间。

II.这里的alternate是赖反向播放动画,比如说一个动画片的轴如下

@keyframes down

{

      from

{

  …

}

      95%

      {

           …

      }

      to

      {

           …

}

     

}

正好往播放是from-95-to,反向播放to-95%-from

(3)小案例

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      width:300px;

      height:400px;

      background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e,
#1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

      border:1px solid red;

      background-repeat:no-repeat;

      background-size:100% 700%;

      animation:dnf 1s infinite alternate;

}   

@keyframes dnf

{

      100%

      {

           background-position:0% 100%;

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”lol”></div>

</body>              

</html>                 

                        

                         

d. @keyframes down{95%{…}}

设若对应animate:down 1.5s;

卡通在履行到95%就算到了最终状态,剩余5%之日子会见因此当回到初始状态。

(3)代码加解释

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

<title>为了在</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      margin:0px auto;

      top:100px;

      width:80px;

      height:80px;

      background-color:red;

      border-radius:40px;            

      position:absolute;

      left:160px;

      animation:down 1.5s infinite alternate;

}   

@keyframes down

{

      95%

      {

           width:15px;

           height:15px;

           border-radius:7.5px; /*保险div始终是独周*/

           top:300px;

           left:192.5px;/*保证小球始终水平居中*/

           background:blue;

      }

}

#frame

{

      width:400px;

      height:315px;

      margin:100px auto;

      border:1px red solid;

      position:relative;

}

#head

{

      width:400px;

      height:100px;

      text-align:center;

      font-size:40px;

      font-weight:bold;

      line-height:100px;

      background-image:-webkit-linear-gradient(90deg, #be1e1e,
#be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

/*前面文章有关系*/

      -webkit-background-clip: text;/*分背景颜色,只当文字上出示*/

      -webkit-text-fill-color:transparent;/*字填充为透明色*/

      background-size:100% 700%;    

/*前面文章有关联*/

      animation:bc 6s infinite;

}

@keyframes bc

{

      to

      {

           background-position:100% 100%;

/*前面文章有关系*/

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”frame”>

           <div id=”head”>Animatiom</div>

           <div id=”lol”></div>

      </div>

</body>              

</html>                 

                        

                         

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website