<>漂亮的相册(三)

我们可以通过动画的形式,自动的让相册运动,我们叫动画。
动画首先设定一个模式@keyframes
@keyframes myfirst
{
0% {background: red;}
100% {background: yellow;}
}
当在 @keyframes 中创建动画,请把它捆绑到某个选择器,否则不会产生动画效果,animation

div
{ animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }

更多的时候,我们还可以设定动画是否周期播放,逆向还是顺向,是否暂停,播放次数,是否延时,一个周期的时间。

div
{ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;

现在我们给相册添加动画,让它在没有鼠标移动的情况下,执行动画
<<web>>漂亮的相册(三)_第1张图片
<<web>>漂亮的相册(三)_第2张图片
代码
1.html

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <link href="D:/test/css/css.css" rel="stylesheet" type="text/css">
   <title></title>
  </head>
 <body>
   <div class="polaroid rotate_left">

     <img src="D:/test/images/1.jpg" witdh="300px" height="300px"/>
   <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_right">
      <img src="D:/test/images/2.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_left">
    <img src="D:/test/images/3.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>
   <div class="polaroid rotate_right">
    <img src="D:/test/images/4.jpg" witdh="300px" height="300px"/>
      <p class="caption">wallence</p>
   </div>

 </body>
</html>

2.css

body{ margin:30px; background-color: #e9e9e9; }
@keyframes myFirst{
    0% {}
100%{width:410px; padding:30px 30px 30px 30px; border:10px solid #BFBFBF; background-color:blue; /* Add box-shadow */ box-shadow:20px 50px 20px #aaaaaa; transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}
}
@-moz-keyframes myFirst{0% {}
100%{width:410px; padding:30px 30px 30px 30px; border:10px solid #BFBFBF; background-color:blue; /* Add box-shadow */ box-shadow:20px 50px 20px #aaaaaa; transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */}}
@-webkit-keyframes myFirst{
    0% {}
100%{ width:410px; padding:30px 30px 30px 30px; border:10px solid #BFBFBF; background-color:blue; /* Add box-shadow */ box-shadow:20px 50px 20px #aaaaaa; transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); }
}

div.polaroid
{ animation: myFirst 5s; -moz-animation: myFirst 5s; /* Firefox */ -webkit-animation: myFirst 5s; /* Safari 和 Chrome */ -o-animation: myFirst 5s; /* Opera */ width:310px; padding:10px 10px 20px 10px; border:4px solid #BFBFBF; background-color:white; /* Add box-shadow */ box-shadow:10px 30px 10px #aaaaaa; transition:width 2s, height 2s,transform 2s,background-color 2s; -moz-transition:width 2s, height 2s, background-color 2s,-moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, background-color 2s,-webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s,background-color 2s, -o-transform 2s; /* Opera */ }
div.polaroid:hover{ width:410px; padding:30px 30px 30px 30px; border:10px solid #BFBFBF; background-color:blue; /* Add box-shadow */ box-shadow:20px 50px 20px #aaaaaa; transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */ }
div.rotate_left{ float:left; transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ }
div.rotate_right{ float:left; transform:rotate(-8deg); -ms-transform:rotate(-8deg); /* IE 9 */ }
caption{ float:right; font-style:oblique; }

你可能感兴趣的:(<>漂亮的相册(三))