Graphic composition of css3.0

This article mainly introduces the graphic composition of css3.0, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

The emergence of css3.0 has brought us It has a great impact. The main knowledge point of this article is the application of transform attribute/animate. Interested friends can refer to and study the examples. I hope it will be helpful to you in learning graphic composition

Main knowledge points
① transform attribute:
Ratate (degree of rotation)
Scale (equal scaling)
Skew(x, y); Let the element be displayed tilted, including two parameter values, representing X respectively The angle of tilt between the axis and the Y axis. If the second parameter is empty, it defaults to 0. A negative parameter means tilting in the opposite direction.
②animate is suitable for generating width, height, left, top, etc. when the mouse passes. Example transition: 1s ease all; All events generate animation!

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%,#fff 100%);/*等价于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{ 
-webkit-animation:moveclouds 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="cloud x4"></p> 
　　<p class="cloud x5"></p> 
</p>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the usage of the Transition animation attribute in CSS3

CSS realizes web page background gradient Four code settings

The above is the detailed content of Graphic composition of css3.0. For more information, please follow other related articles on the PHP Chinese website!