一个html和css写的空间相册_html空间相册-CSDN博客

本文链接：https://blog.csdn.net/FZXCY/article/details/120450989

这是一个简单的有3d和动画效果的可以监听鼠标移入事件的相册。程序员为数不多的表白手段，可以根据自己的需求更改里面的代码，例如：把开始样式设置为不透明的，在里面的正方体加东西，鼠标移入过后变为透明，方便表白，这就看你加什么了。如果不喜欢这个旋转方式也可以自己更改代码，具体代码在下面。自己弄的效果图有水印，效果图：

这是html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>

<!-- <audio src="换小仙女的照片/纯音乐 - 遇见 (钢琴版).mp3" autoplay loop></audio> -->
        <div>
            <img src="换小仙女的照片/1.jpg" alt="">
            <img src="换小仙女的照片/2.jpg" alt="">
            <img src="换小仙女的照片/3.jpg" alt="">
            <img src="换小仙女的照片/4.jpg" alt="">
            <img src="换小仙女的照片/5.jpg" alt="">
            <img src="换小仙女的照片/5.jpg" alt="">
            <img src="换小仙女的照片/7.jpg" alt="">
            <img src="换小仙女的照片/5.jpg" alt="">
            <img src="换小仙女的照片/1.jpg" alt="">
            <img src="换小仙女的照片/2.jpg" alt="">
            <img src="换小仙女的照片/3.jpg" alt="">
            <img src="换小仙女的照片/5.jpg" alt="">
            <img src="换小仙女的照片/1.jpg" alt="">
            <img src="换小仙女的照片/2.jpg" alt="">
            <img src="换小仙女的照片/3.jpg" alt="">
            <img src="换小仙女的照片/5.jpg" alt="">
            <img src="换小仙女的照片/1.jpg" alt="">
            <img src="换小仙女的照片/2.jpg" alt="">
           
           </div>
 
</body>

</html>

这是css代码：

/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
	  2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
	  3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。*/
/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, 
/* structural elements 结构元素*/
dl,dt,dd,ul,ol,li, 
/* list elements 列表元素*/
pre, 
/* text formatting elements 文本格式元素*/
form,fieldset,legend,button,input,textarea, 
/* form elements 表单元素*/
th, td 
/* table elements 表格元素*/
{
	margin: 0;
	padding: 0;
}
/** 设置默认字体 **/
body,button,input,select,textarea 
/* for ie*/
	 {
	font-family:微软雅黑;
	font-size:12px;
	background-color: white;
}
h1,h2,h3,h4,h5,h6{
	font-size: 100%;
}
address,cite,dfn,em,var{
	font-style: normal;
}
/* 将斜体扶正*/
code,kbd,pre,samp{
	font-family: courier new, courier, monospace;
}
/* 统一等宽字体*/
small{
	font-size: 12px;
}
/* 小于 12px 的中文很难阅读，让 small 正常化*/
	/** 重置列表元素 **/
ul,ol{
	list-style: none;
}
/** 重置文本格式元素 **/
	
a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
/** 重置表单元素 **/
legend{
	color: #000;
}
/* for ie6*/
fieldset,img{
	border: 0;
}
/* img 搭车：让链接里的 img 无边框*/
button,input,select,textarea{
	font-size: 100%;
}
/* 使得表单元素在 ie 下能继承字体大小*/
	/* 注：optgroup 无法扶正*/
	/** 重置表格元素 **/
table{
	border-collapse: collapse;
	border-spacing: 0;
}
/* 处理图像3px问题 */
img{
	vertical-align:middle;
}


html,body{
    width: 100%;
    height: 100%;
}


body>div:nth-child(1){
 
    transform: rotate3d(1,1,1,0deg);
    transform-style: preserve-3d;
    position: relative;
    width: 50;
    height: 50;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  
    animation: xixi 8s linear infinite;
}
img{
    border: none;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    opacity:0.1;
    transition: 2s;
}
div>img:nth-child(1){
 
}
div>img:nth-child(2){
  transform-origin: right;
transform: rotateY(90deg);
}
div>img:nth-child(3){
    transform: translateZ(200px);
  }
  div>img:nth-child(4){
    transform-origin: left;
    transform: rotateY(-90deg);
  }
  div>img:nth-child(5){
    transform-origin: top;
    transform: rotateX(90deg);
  }
  div>img:nth-child(6){
    transform-origin: bottom;
    transform: rotateX(-90deg);
  }
  div:hover>img:nth-child(7){
      width: 250px;
      height: 250px;
      opacity: 0.6;
    transform: translateZ(400px);
  }
  div:hover>img:nth-child(8){
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform: translatex(200px) rotateY(90deg);
  }
  div:hover>img:nth-child(9){
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform: translatez(-200px);
  }
  div:hover>img:nth-child(10){
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform: translatex(-200px)  rotateY(-90deg);
  }
  div:hover>img:nth-child(11){
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform-origin: top;
    transform: rotateX(90deg) translateZ(200px);
  }
  div:hover>img:nth-child(12){
    width: 250px;
    height: 250px;
    opacity: 0.6;
    transform-origin: bottom;
    transform: rotateX(-90deg) translateZ(200px);
  }
  div:hover>img:nth-child(13){
      width: 300px;
      height: 300px;
      opacity: 0.3;
    transform: translateZ(600px);
  }
  div:hover>img:nth-child(14){
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transform: translatex(400px) rotateY(90deg);
  }
  div:hover>img:nth-child(15){
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transform: translatez(-400px);
  }
  div:hover>img:nth-child(16){
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transform: translatex(-400px)  rotateY(-90deg);
  }
  div:hover>img:nth-child(17){
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transform-origin: top;
    transform: rotateX(90deg) translateZ(400px);
  }
  div:hover>img:nth-child(18){
    width: 300px;
    height: 300px;
    opacity: 0.3;
    transform-origin: bottom;
    transform: rotateX(-90deg) translateZ(400px);
  }
  @keyframes xixi {
      0%{}
      100%{
        transform: rotate3d(1,1,0,360deg);
      
      }
  }
 div:hover>img{
  opacity:1;
}