html css相册收集
一：
html:
<link rel="stylesheet" type="text/css" href="./b.css">
<body>
<div class="d_photo">
<div class="sig_photo"><img src=" " id="pic1"/></div>
<div class="sig_photo"><img src="" id="pic2"/></div>
<div class="sig_photo"><img src="" id="pic3"/></div>
<div class="sig_photo"><img src="" id="pic4"/></div>
<div class="sig_photo"><img src="" id="pic5"/></div>
<div class="d_photo">
<div class="sig_photo"><img src="" id="pic6"/></div>
<div class="sig_photo"><img src="" id="pic7"/></div>
<div class="sig_photo"><img src="" id="pic8"/></div>
<div class="sig_photo"><img src="" id="pic9"/></div>
<div class="sig_photo"><img src="" id="pic10"/></div>
</div>
</body>
css:
body{
width: 100%;
background-image: url("img/bg.jpg") ;
}
.d_photo{
width: 900px;
height: 180px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.sig_photo{
float: left;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: 20px;
}
img{
width: 150px;
height: 150px;
-moz-transition: width 1s,height 1s,transform 1s;
-webkit-transition: width 1s,height 1s,transform 1s;
}
#pic1{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic2{
-moz-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
}
#pic3{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic4{
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
}
#pic5{
-moz-transform: rotate(6deg);
-webkit-transform: rotate(-6deg);
}
#pic6{
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
#pic7{
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
#pic8{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
}
#pic9{
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}
#pic10{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
#pic1:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(360deg);
-webkit-transform:rotate(360deg);
}
#pic2:hover{
z-index: 10;
-moz-transform: scale(1.15);
-webkit-transform:scale(1.15);
}
#pic3:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
#pic4:hover{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 10;
}
#pic5:hover{
-moz-transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
z-index: 10;
}
#pic6:hover{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
z-index: 10;
}
#pic7:hover{
width: 300px;
height: 350px;
-moz-transform: translate(100px,-170px);
-webkit-transform: translate(100px,-170px);
z-index: 10;
}
#pic8:hover{
width: 300px;
height: 350px;
z-index: 10;
-moz-transform: translate(0px,-170px);
-webkit-transform: translate(0px,170px);
}
二：
<div style="display:none;">旋转立方体</div>
<style>
/*最外层容器样式*/
.wrap {
width: 100px;
height: 100px;
margin: 150px;
position: relative;
}
/*包裹所有容器样式*/
.cube {
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
</style>
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="" class="pic">
</div>
<!--后面图片 -->
<div class="out_back">
<img src="" class="pic">
</div>
<!--左面图片 -->
<div class="out_left">
<img src="" class="pic">
</div>
<!--右面图片 -->
<div class="out_right">
<img src="" class="pic">
</div>
<!--上面图片 -->
<div class="out_top">
<img src="" class="pic">
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="" class="pic">
</div>
<!--小正方体 -->
<span class="in_front">
<img src="" class="in_pic">
</span>
<span class="in_back">
<img src="" class="in_pic">
</span>
<span class="in_left">
<img src="" class="in_pic">
</span>
<span class="in_right">
<img src="" class="in_pic">
</span>
<span class="in_top">
<img src="" class="in_pic">
</span>
<span class="in_bottom">
<img src="" class="in_pic">
</span>
</div>
</div>
<link rel="stylesheet" type="text/css" href="./waifu.css">
css:
.waifu {
position:fixed;
bottom:0;
left:0;
z-index:1;
font-size:0;
-webkit-transform:translateY(3px);
transform:translateY(3px)
}
.waifu:hover {
-webkit-transform:translateY(0);
transform:translateY(0)
}
.waifu.showMyhkPlayer {
-webkit-transform:translate3d(365px,0,0);
-moz-transform:translate3d(365px,0,0);
-ms-transform:translate3d(365px,0,0);
transform:translate3d(365px,0,0)
}
@media (max-width:768px) {
.waifu {
display:none
}
}
.waifu-tips {
opacity:0;
width:250px;
height:70px;
margin:-20px 20px;
padding:5px 10px;
border:1px solid rgba(224,186,140,.62);
border-radius:12px;
background-color:rgba(236,217,188,.5);
box-shadow:0 3px 15px 2px rgba(191,158,118,.2);
font-size:12px;
text-overflow:ellipsis;
overflow:hidden;
position:absolute;
animation-delay:5s;
animation-duration:50s;
animation-iteration-count:infinite;
animation-name:shake;
animation-timing-function:ease-in-out
}
.waifu-tool {
display:none;
color:#aaa;
top:50px;
right:10px;
font-size:14px;
position:absolute
}
.waifu:hover .waifu-tool {
display:block
}
.waifu-tool span {
display:block;
cursor:pointer;
color:#5b6c7d;
line-height:20px;
transition:.2s
}
.waifu-tool span:hover {
color:#34495e
}
.waifu #live2d {
position:relative
}
.waifu #live2d:hover {
cursor:-webkit-grab
}
.waifu #live2d:active {
cursor:-webkit-grabbing
}
@keyframes shake {
2% {
transform:translate(.5px,-1.5px) rotate(-.5deg)
}
4% {
transform:translate(.5px,1.5px) rotate(1.5deg)
}
6% {
transform:translate(1.5px,1.5px) rotate(1.5deg)
}
8% {
transform:translate(2.5px,1.5px) rotate(.5deg)
}
10% {
transform:translate(.5px,2.5px) rotate(.5deg)
}
12% {
transform:translate(1.5px,1.5px) rotate(.5deg)
}
14% {
transform:translate(.5px,.5px) rotate(.5deg)
}
16% {
transform:translate(-1.5px,-.5px) rotate(1.5deg)
}
18% {
transform:translate(.5px,.5px) rotate(1.5deg)
}
20% {
transform:translate(2.5px,2.5px) rotate(1.5deg)
}
22% {
transform:translate(.5px,-1.5px) rotate(1.5deg)
}
24% {
transform:translate(-1.5px,1.5px) rotate(-.5deg)
}
26% {
transform:translate(1.5px,.5px) rotate(1.5deg)
}
28% {
transform:translate(-.5px,-.5px) rotate(-.5deg)
}
30% {
transform:translate(1.5px,-.5px) rotate(-.5deg)
}
32% {
transform:translate(2.5px,-1.5px) rotate(1.5deg)
}
34% {
transform:translate(2.5px,2.5px) rotate(-.5deg)
}
36% {
transform:translate(.5px,-1.5px) rotate(.5deg)
}
38% {
transform:translate(2.5px,-.5px) rotate(-.5deg)
}
40% {
transform:translate(-.5px,2.5px) rotate(.5deg)
}
42% {
transform:translate(-1.5px,2.5px) rotate(.5deg)
}
44% {
transform:translate(-1.5px,1.5px) rotate(.5deg)
}
46% {
transform:translate(1.5px,-.5px) rotate(-.5deg)
}
48% {
transform:translate(2.5px,-.5px) rotate(.5deg)
}
50% {
transform:translate(-1.5px,1.5px) rotate(.5deg)
}
52% {
transform:translate(-.5px,1.5px) rotate(.5deg)
}
54% {
transform:translate(-1.5px,1.5px) rotate(.5deg)
}
56% {
transform:translate(.5px,2.5px) rotate(1.5deg)
}
58% {
transform:translate(2.5px,2.5px) rotate(.5deg)
}
60% {
transform:translate(2.5px,-1.5px) rotate(1.5deg)
}
62% {
transform:translate(-1.5px,.5px) rotate(1.5deg)
}
64% {
transform:translate(-1.5px,1.5px) rotate(1.5deg)
}
66% {
transform:translate(.5px,2.5px) rotate(1.5deg)
}
68% {
transform:translate(2.5px,-1.5px) rotate(1.5deg)
}
70% {
transform:translate(2.5px,2.5px) rotate(.5deg)
}
72% {
transform:translate(-.5px,-1.5px) rotate(1.5deg)
}
74% {
transform:translate(-1.5px,2.5px) rotate(1.5deg)
}
76% {
transform:translate(-1.5px,2.5px) rotate(1.5deg)
}
78% {
transform:translate(-1.5px,2.5px) rotate(.5deg)
}
80% {
transform:translate(-1.5px,.5px) rotate(-.5deg)
}
82% {
transform:translate(-1.5px,.5px) rotate(-.5deg)
}
84% {
transform:translate(-.5px,.5px) rotate(1.5deg)
}
86% {
transform:translate(2.5px,1.5px) rotate(.5deg)
}
88% {
transform:translate(-1.5px,.5px) rotate(1.5deg)
}
90% {
transform:translate(-1.5px,-.5px) rotate(-.5deg)
}
92% {
transform:translate(-1.5px,-1.5px) rotate(1.5deg)
}
94% {
transform:translate(.5px,.5px) rotate(-.5deg)
}
96% {
transform:translate(2.5px,-.5px) rotate(-.5deg)
}
98% {
transform:translate(-1.5px,-1.5px) rotate(-.5deg)
}
0%,
100% {
transform:translate(0,0) rotate(0)
}
}
@font-face {
font-family:Flat-UI-Icons;
src:url(flat-ui-icons-regular.eot);
src:url(flat-ui-icons-regular.eot?#iefix) format('embedded-opentype'),
url(flat-ui-icons-regular.woff) format('woff'),
url(flat-ui-icons-regular.ttf) format('truetype'),
url(flat-ui-icons-regular.svg#flat-ui-icons-regular) format('svg')
}
[class*=fui-],
[class^=fui-] {
font-family:Flat-UI-Icons;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.fui-cross:before {
content:"\e609"
}
.fui-info-circle:before {
content:"\e60f"
}
.fui-photo:before {
content:"\e62a"
}
.fui-eye:before {
content:"\e62c"
}
.fui-chat:before {
content:"\e62d"
}
.fui-home:before {
content:"\e62e"
}
.fui-user:before {
content:"\e631"
}
三：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3dPhoto</title>
<link rel="stylesheet" type="text/css" href="./b.css"/>
</head>
<body>
<div class="show">
<div class="box">
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
<img src="" >
</div>
</div>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/wbg.png);
}
.box {
width: 320px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
animation: im 20s linear infinite;
}
.box img {
width: 100%;
height: 100%;
position: absolute;
}
@keyframes im{
0% {
transform: rotateY(0deg) rotateX(10deg);
}
25% {
transform: rotateY(90deg) rotateX(-10deg);
}
50% {
transform: rotateY(180deg) rotateX(10deg);
}
75% {
transform: rotateY(270deg) rotateX(-10deg);
}
100% {
transform: rotateY(360deg) rotateX(10deg);
}
}
/*10张图片3d变换*/
.box img:nth-child(1) {
transform: rotateY(0deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(2) {
transform: rotateY(36deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(3) {
transform: rotateY(72deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(4) {
transform: rotateY(108deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(5) {
transform: rotateY(144deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(6) {
transform: rotateY(180deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(7) {
transform: rotateY(216deg) translateZ(600px);
backface-visibility:visible;
}
.box img:nth-child(8) {
transform: rotateY(252deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(9) {
transform: rotateY(288deg) translateZ(600px);
backface-visibility: visible;
}
.box img:nth-child(10) {
transform: rotateY(324deg) translateZ(600px);
backface-visibility: visible;
}
四：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cube</title>
<link rel="stylesheet" type="text/css" href="./b.css"/>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
ul {
width: 300px;
height: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/*3d空间*/
transform-style: preserve-3d;
animation: box 20s linear infinite;
}
@keyframes box {
/*3d旋转 x y z deg*/
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 1, 360deg);
}
}
li {
width: 300px;
height: 300px;
list-style: none;
border: 1px solid black;
position: absolute;
opacity: 0.8;
box-shadow: 0px 0px 10px white;
}
li:nth-child(1) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: translateZ(150px);
}
/*后*/
li:nth-child(2) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: translateZ(-150px);
}
/*左*/
li:nth-child(3) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: rotateY(90deg) translateZ(-150px);
}
/*右*/
li:nth-child(4) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: rotateY(90deg) translateZ(150px);
}
/*上*/
li:nth-child(5) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: rotateX(90deg) translateZ(150px);
}
li:nth-child(6) {
background: url(https://images.cnblogs.com/cnblogs_com/ljy-endl/1526565/t_v2-079ecf6b586a38507cdcd22c63ba9510_hd.jpg);
background-position: center;
background-size: cover;
transform: rotateX(90deg) translateZ(-150px);
}
ul:hover {
animation-play-state: paused;
}
五：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhotoWall1</title>
<link rel="stylesheet" type="text/css" href="./a.css"/>
</head>
<body>
<ul>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
<li><img src="" ></li>
</ul>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333;
}
ul {
width: 1020px;
height: 600px;
border: white solid 5px;
margin: 60px auto;
box-shadow: 0px 0px 10px #ccc;
}
li {
width: 320px;
height: 180px;
list-style: none;
float: left;
margin: 10px;
/* x y 扩散程度 阴影颜色*/
box-shadow: 0px 0px 10px white;
}
img {
width: 100%;
height: 100%;
}
img:hover {
width: 150%;
height: 150%;
position: relative;
top: -40px;
left: -40px;
}
六：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhotoWall2</title>
<link rel="stylesheet" type="text/css" href="./a.css" />
</head>
<body>
<div class="box">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/wbg.png);
}
.box{
width: 1000px;
margin: 0px auto;
margin-top: 100px;
}
.box img {
width: 320px;
height: 180px;
border: 5px solid azure;
box-shadow: -10px -10px 10px black;
transition: all 0.3s linear;
}
img:nth-child(odd) {
transform: rotate(20deg);
}
img:nth-child(even) {
transform: rotate(-20deg);
}
img:hover {
transform: scale(1.3);
position: relative;
z-index: 2;
}
