Graphic composition of css3.0

This article mainly introduces the graphic composition of the css3.0, has a certain reference value, now share to everyone, the need for friends can refer to

The appearance of css3.0 has brought us a great influence, this article main knowledge Point transform attribute/animate application, the interested friend can refer to and study the next instance, hoped to be helpful to you to study the graphic composition

key points of knowledge
①transform Properties:
Ratate (rotation degree)
Scale (equal scaling)
Skew (x, y), let the element tilt display, contains two parameter values, respectively, the x-axis and the y-axis tilt angle, if the second parameter is empty, the default is 0, the parameter is negative to the opposite direction of the tilt.
②animate for the mouse to generate width, height, left,top and so on example transition:1s ease all;

p {-webkit-animation-name:pulse;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;- Webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; }@-webkit-keyframes Pulse {from {opacity:0.0; font-size:100%,} to {opacity:1.0; font-size:200%;}} Style *{margin:0; padding:0;} body {Overflow:hidden;} #clouds {background:-webkit-linear-gradient (top, #c9dbe9 0, #ff f 100%);/* equivalent to Background:-webkit-gradient (Linear,left top,left bottom,from (C9DBE9), to (#fff)) */background:- Moz-linear-gradient (Top, #c9dbe9 0, #fff 100%) background:-o-linear-gradient (top, #c9dbe9 0, #fff 100%); padding : 100px 0px; }. cloud{width:200px; height:60px; background: #FFF; border-radius:200px;-webkit-border-radius:200px;- moz-border-radius:200px; -o-border-radius:200px; Position:relative;} . cloud:after,.cloud:before{content: '; position:absolute; background: #FFF; width:100px; height:80px; top:-15px; left : 10px; border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;} . cloud:after{width:120px; height:120px; top:-55px; left:auto; right:15px x1{25s Linear infinite; -moz-animation:moveclouds 25s linear infinite; -o-animation:moveclouds 25s linear Infinite;} . x2{left:200px; Transform:scale (0.6);-webkit-transform:scale (0.6);-moz-transform:scale (0.6);-o-transform:scale ( 0.6); opacity:0.6; Animation:moveclouds 25s linear infinite; -webkit-animation:moveclouds 25s linear infinite; -moz-animation:moveclouds 25s linear infinite; -o-animation:moveclouds 25s linear Infinite;} . x3{top:-200px; left:-250px; Transform:scale (0.6);-webkit-transform:scale (0.6);-moz-transform:scale (0.6);- O-transform:scale (0.6); opacity:0.6; Animation:moveclouds 25s linear infinite; -webkit-animation:moveclouds 25s linear infinite; -moz-animation:moveclouds 25s linear infinite; -o-animation:moveclouds 25s linear Infinite;} . x4{top:200px; left:470px; Transform:scale (0.6);-webkit-transform:sCale (0.6); -moz-transform:scale (0.6); -o-transform:scale (0.6); opacity:0.6; Animation:moveclouds 25s linear infinite; -webkit-animation:moveclouds 25s linear infinite; -moz-animation:moveclouds 25s linear infinite; -o-animation:moveclouds 25s linear Infinite;} . x5{left:470px; top:-250px; Transform:scale (0.8);-webkit-transform:scale (0.8);-moz-transform:scale (0.8);- O-transform:scale (0.8); opacity:0.8; Animation:moveclouds 25s linear infinite; -webkit-animation:moveclouds 18s linear Infinite; -moz-animation:moveclouds 18s linear Infinite; -o-animation:moveclouds 18s linear Infinite;} @-webkit-keyframes moveclouds{0%{margin-left:1000px;} 100%{margin-left:-1000px;} @-moz-keyframes moveclouds{0%{ margin-left:1000px;} 100%{margin-left:-1000px;}} @-o-keyframes moveclouds{0%{margin-left:1000px;} 100%{margin-left:-1000px;}} HTML <p id= "Clouds" > <p class= "  Cloud x1 "></p> <p class=" Cloud X2 "></p> <p class=" Cloud X3 "></p> <p class=" cloudX4 "></p> <p class=" Cloud X5 "></p> </p> 

above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!