<<web>>漂亮的相册(三)

最新推荐文章于 2024-05-17 08:00:33 发布

prototypeAlert

最新推荐文章于 2024-05-17 08:00:33 发布

阅读量833

点赞数

分类专栏： <2016> web

本文链接：https://blog.csdn.net/qq_15766257/article/details/51397626

版权

<2016> 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

web

15 篇文章 0 订阅

订阅专栏

我们可以通过动画的形式，自动的让相册运动，我们叫动画。
动画首先设定一个模式@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;

现在我们给相册添加动画，让它在没有鼠标移动的情况下，执行动画
这里写图片描述

代码
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; 
}

prototypeAlert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<<web>>漂亮的相册(三)

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

扫一扫