CSS3 realize the effect of a gradually growing circle-filled div background

Mobile phone side Now some applications will use such an effect, that is, the duang of a circle becomes larger until the full div, dynamic.

Think of CSS3 's scale attribute and implement it yourself.

<id= "BCD"  style= "width:500px;height:200px;position:relative; Background-color: #aaa; overflow:hidden;border:3px solid #333; " >    <  class= "Anim"></div></ Div >

CSS style:

. Anim{position:Absolute;Border-radius:50%;Height:1200px;width:1200px;Background-color:#fff;Border-radius:50%;/*Background:url (1.png) no-repeat;*/Top:-550px; Left:-480px;-webkit-transform:Scale (0);-ms-transform:Scale (0);Transform:Scale (0);-webkit-transform-origin:Center Center 0;-ms-transform-origin:Center Center 0;Transform-origin:Center Center 0;-webkit-transition:All 0.6s ease 0s;-moz-transition:All 0.6s ease 0s;transition:All 0.6s ease 0s; }. Active{-webkit-transform:Scale (1);-moz-transform:Scale (1);-ms-transform:Scale (1);Transform:Scale (1);-webkit-transition:all 1s ease-in 0s;-moz-transition:all 1s ease-in 0s;transition:all 1s ease-in 0s; }</style>

The transition property is generally used only as a transition between transitions between two states, and more specifically,transition defines transitions from other states to the state in which the definition resides. in the example above, the transition of the active class defines the transition of the other class (. anim) to the active class, while the transition definition of the Anim class is the transition from another class (. Active) to the Anim class.

The browser compatibility of transform and transition is posted here:

Transform, from Https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Transition (note IE's transition without MS prefix), from https://developer.mozilla.org/en-US/docs/Web/CSS/transition

By clicking on the box, you can duang the entire DIV,JS code with a gradually growing circle:

  function $ (a) {    return  document.getElementById (a);  }  $ ("BCD"). onclick=function() {    if(this. children[0].classname = = "Anim")      {this. children[0].classname+= "active";    }     Else {      this. Children[0].classname= "Anim";    }  } 

Consider the use of classes to express the different states of simple and intuitive, of course, can also be rewritten directly with style:

$ ("BCD"). onclick=function(){    vart = This. children[0].style; //Note that the browser compatibility properties of the first letter, WebKit the core of the W can be uppercase or lowercase, Firefox is moz and IE is MS, using jquery CSS method when the compatibility with this    if(t.transform== "scale (1)" | | t.webkittransform== "scale (1)" | | t.moztransform== "scale (1)" | | t.mstransform== "scale (1)") {T.transform= "scale (0)"; T.webkittransform= "scale (0)"; T.moztransform= "scale (0)"; T.mstransform= "scale (0)"; }    Else{t.transform= "scale (1)"; T.webkittransform= "scale (1)"; T.moztransform= "scale (1)"; T.mstransform= "scale (1)"; }}

I'll put it on again tomorrow, sleep first.

CSS3 realize the effect of a gradually growing circle-filled div background