Christmas arrived again, take what to coax girlfriend happy?
Let’s start with a simple snowman animation:
Project structure: \
html:
<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Christmas tree snowman snow animation effect</title>
<style type="text/css">
body{margin:0;padding:0;list-style-type:none; }.header{
margin: 0 0 30px;
background: url(css/img/header-bg.png);
background: url(css/img/snow-bg.png) repeat-y center, url(css/img/header-bg.png);
-webkit-animation: animate-snow 9s linear infinite;
-moz-animation: animate-snow 9s linear infinite;
-ms-animation: animate-snow 9s linear infinite;
animation: animate-snow 9s linear infinite;
}
@-webkit-keyframes animate-snow
{
0% { background-position: center 0.0 0; }100% { background-position: center 885px.0 0;}
}
@-moz-keyframes animate-snow
{
0% { background-position: center 0.0 0; }100% { background-position: center 885px.0 0;}
}
@-ms-keyframes animate-snow
{
0% { background-position: center 0.0 0; }100% { background-position: center 885px.0 0;}
}
@keyframes animate-snow
{
0% { background-position: center 0.0 0; }100% { background-position: center 885px.0 0;}
}
.wrapper{ width: 960px; height: 315px; margin: auto; overflow: hidden; position: relative; background-image: url(css/img/wrapper-bg.png); background-repeat: no-repeat; background-position: bottom; }
@-moz-keyframes animate-drop {
0% {opacity:0; -moz-transform: translate(0, -315px); }100% {opacity:1; -moz-transform: translate(0.0);}
}
@-webkit-keyframes animate-drop {
0% {opacity:0; -webkit-transform: translate(0, -315px); }100% {opacity:1; -webkit-transform: translate(0.0);}
}
@-ms-keyframes animate-drop {
0% {opacity:0; -ms-transform: translate(0, -315px); }100% {opacity:1; -ms-transform: translate(0.0);}
}
@keyframes animate-drop {
0% {opacity:0;transform: translate(0, -315px); }100% {opacity:1;transform: translate(0.0);}
}
.christmas-tree..snowman {
position: absolute;
-moz-animation: animate-drop 1s linear;
-webkit-animation: animate-drop 1s linear;
-ms-animation: animate-drop 1s linear;
animation: animate-drop 1s linear;
}
.christmas-tree {
width: 112px;
height: 137px;
background: url(css/img/christmas-tree.png);
}
.snowman {
width: 115px;
height: 103px;
top: 195px;
left: 415px;
background: url(css/img/snowman.png);
-moz-animation-duration:.6s;
-webkit-animation-duration:.6s;
-ms-animation-duration:.6s;
animation-duration:.6s;
}
.tree1 {
top: 165px;
left: 35px;
-moz-animation-duration:.6s;
-webkit-animation-duration:.6s;
-ms-animation-duration:.6s;
animation-duration:.6s;
}
.tree2 {
left: 185px;
top: 175px;
-moz-animation-duration:.9s;
-webkit-animation-duration:.9s;
-ms-animation-duration:.9s;
animation-duration:.9s;
}
.tree3 {
left: 340px;
top: 125px;
-moz-animation-duration:.7s;
-webkit-animation-duration:.7s;
-ms-animation-duration:.7s;
animation-duration:.7s;
}
.tree4 {
left: 555px;
top: 155px;
-moz-animation-duration:.8s;
-webkit-animation-duration:.8s;
-ms-animation-duration:.8s;
animation-duration:.8s;
}
.tree5 {
left: 710px;
top: 170px;
-moz-animation-duration:.7s;
-webkit-animation-duration:.7s;
-ms-animation-duration:.7s;
animation-duration:.7s;
}
.tree6 {
left: 855px;
top: 125px;
-moz-animation-duration:.6s;
-webkit-animation-duration:.6s;
-ms-animation-duration:.6s;
animation-duration:.6s;
}
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="christmas-tree tree1"></div>
<div class="christmas-tree tree2"></div>
<div class="christmas-tree tree3"></div>
<div class="snowman"></div>
<div class="christmas-tree tree4"></div>
<div class="christmas-tree tree5"></div>
<div class="christmas-tree tree6"></div>
</div>
</div>
<div style="text-align:center;">
<p>Source:<a href="sunmenglei.blog.csdn.net" target="_blank">Sun Called beast's blog</a></p>
</div>
<script src="http://down.admin5.comjs/tongji.js"></script>
<script src="http://down.admin5.comjs/youxia.js" type="text/javascript"></script>
</body>
</html>
Copy the code* * image download address: download.csdn.net/download/we… 六四风波
Effect:
This completes the snowman animation in HTML using CSS3.
Now let’s play with a Christmas tree with some characteristics.
Although Christmas is not a traditional festival in China, many fashionable young people like to celebrate this happy festival and are willing to participate in the ceremony of this festival.
In addition to the traditional traditions of Santa Claus, Christmas trees, gift-giving and feasting, programmers can add something special to today’s festivities.
Christmas Tree download:
Download.csdn.net/download/we…
We unzip the downloaded package, put the EXE file on the desktop, double-click to open it.
Desktop renderings:
You can open multiple Christmas trees by right clicking exit to close the tree. \
The code is as follows:
<! DOCTYPEHEML PUBLIC>
<html>
<head>
<meta charset="utf-8">
<style>
html.body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
div
{
margin: 0;
padding: 0;
border: 0;
}
.nav
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 27px;
background-color: white; color: black;
text-align: center;
line-height: 25px;
}
a
{
color: black;
text-decoration: none;
border-bottom: 1px dashed black;
}
a:hover
{
border-bottom: 1px solid red;
}
.previous
{
float: left;
margin-left: 10px;
}
.next
{
float: right;
margin-right: 10px;
}
.green
{
color: green;
}
.red
{
color: red;
}
textarea
{
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
padding-bottom: 20px;
}
.block-outer
{
float: left;
width: 22%;
height: 100%;
padding: 5px;
border-left: 1px solid black;
margin: 30px 3px 3px 3px;
}
.block-inner
{
height: 68%;
}
.one
{
border: 0;
}
</style>
</head>
<body marginwidth="0" marginheight="0">
<canvas id="c" height="356" width="446">
<script>
var collapsed = true;
function toggle()
{
var fs = top.document.getElementsByTagName('frameset') [0];
var f = fs.getElementsByTagName('frame');
if (collapsed)
{
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
}
else
{
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true; } collapsed = ! collapsed; }</script>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas') [0];
var a = c.getContext('2d');
document.body.clientWidth;
</script>
<script>
M=Math; Q=M.random; J=[]; U=16;
T=M.sin;
E=M.sqrt;
for(O=k=0; x=z=j=i=k<200;)
with(M[k]=k? c.cloneNode(0):c)
{
width=height=k?32:W=446;
with(getContext('2d'))
if(k>10|! k)for(
font='60px Impact',
V='rgba('; I=i*U,fillStyle=k? k==13? V+15) ', '205205215,:
V+(147+I)+', '+(k%2?128+I:0) +', '+I+'. 5):'#cca',i<7;) beginPath( fill( arc( U-i/3.24-i/2,
k==13?4-(i++)/2:8-i++,
0,
M.PI*2.1)));else for(;
x=T(i),
y=Q()*2-1,
D=x*x+y*y,
B=E(D-x/9.-1.5*y+1),
R=67*(B+1)*(L=k/9+8.) > >1, i++<W; ) if(D<1) beginPath( strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)' ), moveTo(U+x*8,U+y*8), lineTo(U+x*U,U+y*U), stroke(); for( y=H=k+E(k++)*25, R=Q()*W; P=3,j<H; ) J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1] } setInterval(function G(m,l) { A=T(D-11); if(l) return( m[2]-l[2])*A+(l[0]-m[0])*T(D); A.c learRect (0, 0, W, W); J.sort(G); for( i=0; L=J[i++]; a.drawImage ( M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1) ) { if(i==2e3) a.fillText ( 'Happy Christmas! ', U,345); if(! (i%7)) a.drawImage ( M[13], ((157*(i*i)+T(D*5+i*i)*5)%W)>>0, ((113*i+(D*i)/60)%(290+i/99))>>0 ); } D+=.02 },1)</script>
</body>
</html>
Copy the codeWell, that’s it for this episode, and we’ll see you next time!
