Html+JavaScript+Css特效相册

December 17, 2019 · 技术 · 1033次阅读

旋转相册

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<link type="text/css"  href="./css/1.css" rel="stylesheet ">
</head>
<body>
<div class="content">
    <div class="box">
        <img src="images/1.png" alt=""/>
        <img src="images/2.png" alt=""/>
        <img src="images/3.png" alt=""/>
        <img src="images/4.png" alt=""/>
        <img src="images/5.png" alt=""/>
        <img src="images/6.png" alt=""/>
        <img src="images/7.png" alt=""/>
        <img src="images/8.png" alt=""/>
        <img src="images/9.png" alt=""/>
    </div>
</div>
</body>
</html>
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
    margin:0;
    padding:0;
}
body{
    background: black;
}
.content{
    width: 200px;
    height: 150px;
    position: relative;
    margin:200px auto 0;
    perspective: 1500px;
}
.box{
    width: 200px;
    height: 150px;
    transform-style: preserve-3d;
    transform:rotateX(-30deg);
    animation:photo 15s linear infinite;
}
.box:hover{
    animation:photo 15s linear infinite paused;
}
.box img{
    width: 200px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transition: all 1s;
}
.box img:nth-child(1){
    transform:translateZ(280px);
}
.box img:nth-child(2){
    transform:rotateY(40deg) translateZ(280px);
}
.box img:nth-child(3){
    transform:rotateY(80deg) translateZ(280px);
}
.box img:nth-child(4){
    transform:rotateY(120deg) translateZ(280px);
}
.box img:nth-child(5){
    transform:rotateY(160deg) translateZ(280px);
}
.box img:nth-child(6){
    transform:rotateY(200deg) translateZ(280px);
}
.box img:nth-child(7){
    transform:rotateY(240deg) translateZ(280px);
}
.box img:nth-child(8){
    transform:rotateY(280deg) translateZ(280px);
}
.box img:nth-child(9){
    transform:rotateY(320deg) translateZ(280px);
}

.box img:nth-child(1):hover{
    transform:translateZ(280px) scale(1.2);
}
.box img:nth-child(2):hover{
    transform:rotateY(40deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(3):hover{
    transform:rotateY(80deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(4):hover{
    transform:rotateY(120deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(5):hover{
    transform:rotateY(160deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(6):hover{
    transform:rotateY(200deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(7):hover{
    transform:rotateY(240deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(8):hover{
    transform:rotateY(280deg) translateZ(280px) scale(1.2);
}
.box img:nth-child(9):hover{
    transform:rotateY(320deg) translateZ(280px) scale(1.2);
}

@keyframes photo{
    0%{
        transform:rotateX(-30deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(-30deg) rotateY(360deg);
    }
}
  • 演示地址：

旋转相册

New Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
 <link type="text/css"  href="./css/2.css" rel="stylesheet ">
    <script>
        window.onload=function(){
            var story = document.getElementById('word');
            var s = document.getElementById('show');
            var i = 0;
            timer=setInterval(function(){
                s.innerHTML=story.innerHTML.substring(0,i);
                i++;
                if(s.innerHTML==story.innerHTML){
                    clearInterval(timer);
                }
            },200);
        }
    </script>
</head>
<body >
    <p id="word" style="display:none;"><strong>www
    <br>lilsaey<br>
    cn</p>
    <p id="show"></p>
     <div class="Container">
        <div id="carousel">
            <figure><img src="images/1.png" ></figure>
            <figure><img src="images/2.png"></figure> 
            <figure><img src="images/3.png" ></figure> 
            <figure><img src="images/4.png" ></figure> 
            <figure><img src="images/5.png"></figure> 
            <figure><img src="images/6.png" ></figure> 
        </div> 
    </div>
</body>
</html>
p{ color:red; }
     *{
            padding: 0;
            margin: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
        }
        *:before,*:after{
            box-sizing: border-box;
        }
        html,body{
            min-height: 100%;
        }
        body{ background:#99FF00
            background-image: radial-gradient(mintcream 0%, lightgray 100%);;
        }
        .Container{
            margin: 4% auto;
            width: 210px;
            height: 140px;
            position: relative;
            perspective: 1000px;
        }
        #carousel{
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style:preserve-3d;
            animation: rotation 20s infinite linear;
        }
        #carousel:hover{
            animation-play-state: paused;
        }
        #carousel figure{
          display: block;
            position: absolute;
            width: 220px;
            height: 200px;
            left: 10px;
            top: 10px;
            background: black;
            overflow: hidden;
            border: solid 5px black;
        }
        img{
            filter: grayscale(0);
            cursor: pointer;
            transition:all 0.3s ease 0s;
            width: 100%;
            height: 100%;
        }
        img:hover{
            filter: grayscale(1);
            transform: scale(1.2,1.2);
        }
        #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
        #carousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(288px);}
        #carousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(288px);}
        #carousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(288px);}
        #carousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(288px);}
        #carousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(288px);}

        @keyframes rotation{
            from{
                transform: rotateY(0deg);
            }
            to{
                transform: rotateY(360deg);
            }
        }
  • 演示地址：

New Document

旋转立方体相册

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>旋转立方体相册</title>
<link type="text/css"  href="./css/3.css" rel="stylesheet ">
</head>
<body>
<div class="eyes">
<div class="box">
<div class="div1"><img src="images/1.png" width="100%" height="100%"></div>
<div class="div2"><img src="images/2.png" width="100%" height="100%"></div>
<div class="div3"><img src="images/3.png" width="100%" height="100%"></div>
<div class="div4"><img src="images/4.png" width="100%" height="100%"></div>
<div class="div5"><img src="images/5.png" width="100%" height="100%" ></div>
<div class="div6"><img src="images/6.png" width="100%" height="100%" ></div>
<div class="div7"><img src="images/7.png" width="100%" height="100%" ></div>
</div>
</div>
</body>
</html>
.eyes{
perspective: 1000px;
}
.box{
/*设置3D效果*/
transform-style: preserve-3d;
/*盒子的大小*/
width: 200px;
height: 200px;
background: red;
/*设置盒子的位置，便于观察*/
margin: 400px auto;
/*复合方式设置动画 三者分别为：动画名 执行一次时间 执行方式*/
animation: zhuan 3s ease;
/*令动画无限执行下去*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box div{
width: 200px;
height: 200px;
opacity: 1;
/*设置过渡*/
transition: all 1s ease 0s;
position: absolute;
}
/*调整位置，制作成一个六边形*/
.box .div1{
background: green;
transform: translateZ(100px);
}
.box .div2{
background: green;
transform: translateZ(-100px);
}
.box .div3{
background: green;
transform: rotateX(90deg) translateZ(100px);
}
.box .div4{
background: green;
transform: rotateX(270deg) translateZ(100px);
}
.box .div5{
background: green;
transform: rotateY(-90deg) translateZ(100px);
}
.box .div6{
background: green;
transform: rotateY(90deg) translateZ(100px);
}
/*添加3D旋转效果 让其绕X、Y轴同时旋转90度*/
@keyframes zhuan{
from{
transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateZ(360deg) rotateY(360deg);
}
}
/*给正方体添加一个hover效果*/
.box:hover .div1{
transform: translateZ(200px);
}
.box:hover .div2{
transform: translateZ(-200px);
}
.box:hover .div3{
transform: rotateX(90deg) translateZ(200px);
}
.box:hover .div4{
transform: rotateX(270deg) translateZ(200px);
}
.box:hover .div5{
transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .div6{
transform: rotateY(90deg) translateZ(200px)
}
  • 演示地址：

旋转立方体相册

旋转内含立方体相册

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link type="text/css"  href="./css/4.css" rel="stylesheet ">
    <title>旋转内含立方体相册</title>
</head>
<body>
<div id="react">
    <div class="out_front">
        <img src="./images/1.png" class="out_pic">
    </div>
    <div class="out_back">
        <img src="./images/2.png" class="out_pic">
    </div>
    <div class="out_left">
        <img src="./images/3.png" class="out_pic">
    </div>
    <div class="out_right">
        <img src="./images/4.png" class="out_pic">
    </div>
    <div class="out_top">
        <img src="./images/5.png" class="out_pic">
    </div>
    <div class="out_bottom">
        <img src="./images/6.png" class="out_pic">
    </div>
    <span class="in_front">
        <img src="./images/7.png" class="in_pic">
    </span>
    <span class="in_back">
        <img src="./images/8.png" class="in_pic">
    </span>
    <span class="in_left">
        <img src="./images/9.png" class="in_pic">
    </span>
    <span class="in_right">
        <img src="./images/10.png" class="in_pic">
    </span>
    <span class="in_top">
        <img src="./images/11.png" class="in_pic">
    </span>
    <span class="in_bottom">
        <img src="./images/12.png" class="in_pic">
    </span>
</div>
</body>
</html>
<pre name="code" class="css">*{
    padding:0;
    margin:0;
}
body{
    width:100%;
    height:100%;
    background:#06081B;
}
#react{
    width: 200px;
    height:200px;
    margin: 200px auto;
    transform-style:preserve-3d;
    animation:rotate 20s infinite;
    animation-timing-function: linear;
}
#react div{
    position:absolute;
    transition: all .4s;
}
div .out_pic{
    width:200px;
    height:200px;
    opacity:0.9;
}
div .in_pic{
    width:100px;
    height:100px;
}
#react span{
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
}
@keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
  
  
.out_front{
    transform:translateZ(100px);
}
.out_back{
    transform:translateZ(-100px);
}
.out_left{
    transform:rotateY(90deg) translateZ(100px);
}
.out_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.out_top{
    transform:rotateX(90deg) translateZ(100px);
}
.out_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
.in_front{
    transform:translateZ(50px);
}
.in_back{
    transform:translateZ(-50px);
}
.in_left{
    transform:rotateY(90deg) translateZ(50px);
}
.in_right{
    transform: rotateY(-90deg) translateZ(50px);
}
.in_top{
    transform:rotateX(90deg) translateZ(50px);
}
.in_bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
  
/*外面的图片散开*/
#react:hover .out_front{
    transform:translateZ(200px);
}
#react:hover .out_back{
    transform:translateZ(-200px);
}
#react:hover .out_left{
    transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
    transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
    transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}
  
  
/*里面的图片散开*/
#react:hover .in_front{
    transform:translateZ(100px);
}
#react:hover .in_back{
    transform:translateZ(-100px);
}
#react:hover .in_left{
    transform:rotateY(90deg) translateZ(100px);
}
#react:hover .in_right{
    transform: rotateY(-90deg) translateZ(100px);
}
#react:hover .in_top{
    transform:rotateX(90deg) translateZ(100px);
}
#react:hover .in_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
  
@charset "utf-8";
/* CSS Document */
  • 演示地址：

旋转内含立方体相册

屏风相册

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title>屏风相册</title>
         <link type="text/css"  href="./css/5.css" rel="stylesheet ">
     </head>
     <body>
           <div class="show">
                <div class="box">
                     <img src="images/1.png" class="img1"/>
                     <img src="images/2.png" class="img2"/>
                     <img src="images/3.png" class="img3" />
                     <img src="images/4.png" class="img4" />
                     <img src="images/5.png" class="img5"/>
                     <img src="images/6.png" class="img6"/>
                     <img src="images/7.png" class="img7" />
                     <img src="images/8.png" class="img8" />
                     <img src="images/9.png" class="img9" />
                     <img src="images/10.png" class="img10" />
                     <img src="images/11.png" class="img11" />
                     <img src="images/12.png" class="img12" />
                </div>
           </div>
     </body>
</html>
  body{background: #06081B;
                     perspective: 5000px;
                }
                .show{perspective: 5000px;
                     -webkit-transform: rotateX(-45deg);
                     -moz-transform: rotateX(-45deg);
                     transform: rotateX(-45deg);
                     transform-style: preserve-3d;
  
                }
                .box{
  
                     position: relative;width: 150px;height: 250px;border: 1px solid red;
                     margin: 300px auto;
                     transform-style: preserve-3d;
  
                      -webkit-animation: rotate1 10s linear infinite;
                     -moz-animation: rotate1 10s linear infinite;
                     animation: rotate1 10s linear infinite;
  
                }
                .box img{width: 150px;height: 250px;border: 1px solid #ccc;position: absolute;
                     left: 0;top: 0;
  
  
                     -webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
  
                }
  
                .img1{
                     -webkit-transform: translateZ(300px);
                     -moz-transform: translateZ(300px);
                     transform: translateZ(300px);
                }
  
                .img2{
                     -webkit-transform:rotateY(36deg) translateZ(300px) ;
                     -moz-transform:rotateY(36deg) translateZ(300px) ;
                     transform:rotateY(36deg) translateZ(300px) ;
                }
                .img3{
                     -webkit-transform:rotateY(72deg) translateZ(300px);
                     -moz-transform:rotateY(72deg)g) translateZ(300px) ;
                     transform:rotateY(72deg) (300px) ;
                }
                .img4{
                     -webkit-transform: rotateY(108deg) translateZ(300px);
                     -moz-transform:rotateY(108deg) translateZ(300px) ;
                     transform:rotateY(108deg) translateZ(300px) ;
                }
  
                .img5{
                     -webkit-transform: rotateY(144deg) translateZ(300px);
                     -moz-transform:rotateY(144deg) translateZ(300px) ;
                     transform:rotateY(144deg) translateZ(300px) ;
                }
                .img6{
                     -webkit-transform:rotateY(180deg) translateZ(300px) ;
                     -moz-transform:rotateY(180deg) translateZ(300px) ;
                     transform:rotateY(180deg) translateZ(300px) ;
                }
  
                .img7{
                     -webkit-transform:rotateY(216deg) translateZ(300px) ;
                     -moz-transform:rotateY(216deg) translateZ(300px) ;
                     transform: rotateY(216deg) translateZ(300px);
                }
  
                .img8{
                     -webkit-transform:rotateY(252deg) translateZ(300px) ;
                     -moz-transform:rotateY(252deg) translateZ(300px) ;
                     transform:rotateY(252deg) translateZ(300px) ;
                }
  
                .img9{
                     -webkit-transform:rotateY(288deg) translateZ(300px) ;
                     -moz-transform:rotateY(288deg) translateZ(300px) ;
                     transform:rotateY(288deg) translateZ(300px) ;
                }
  
                .img10{
                     -webkit-transform:rotateY(324deg) translateZ(300px) ;
                     -moz-transform:rotateY(324deg) translateZ(300px) ;
                     transform:rotateY(324deg) translateZ(300px) ;
                }
  
  
                @-moz-keyframes rotate1{
                     0%{
                           -webkit-transform: rotateY(0deg);
                           -moz-transform: rotateY(0deg);
                           transform: rotateY(0deg);
                     }
                     100%{
                           -webkit-transform: rotateY(360deg);
                           -moz-transform: rotateY(360deg);
                           transform: rotateY(360deg);
                     }
                }
                @-webkit-keyframes rotate1{
                     0%{
                           -webkit-transform: rotateY(0deg);
                           -moz-transform: rotateY(0deg);
                           transform: rotateY(0deg);
                     }
                     100%{
                           -webkit-transform: rotateY(360deg);
                           -moz-transform: rotateY(360deg);
                           transform: rotateY(360deg);
                     }
                }
  • 演示地址：

屏风相册

喝杯水

none

最后编辑于11个月前

添加新评论

  1. Escher Escher
    2020-06-10 15:53

    我打算二次修改

    回复
    1. lilsaey lilsaey
      2020-06-12 17:53

      行，等大佬改完我来抄一份

      回复
  2. Escher Escher
    2020-06-10 15:48

    不错，copy

    回复

CATEGORIES

心得技术生活友链

PAGES

首页 lilsaey 友人 归档