上传文件至 ''
This commit is contained in:
parent
e30fd77334
commit
7ef0b7caa1
|
|
@ -0,0 +1,48 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
@charset "utf-8";
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
/*background: url(../img/preview.png) ;*/
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size:100% 100%;
|
||||
position: absolute;
|
||||
margin-left: 800;
|
||||
margin-right: auto;
|
||||
}
|
||||
li{
|
||||
list-style: none;
|
||||
}
|
||||
.box{
|
||||
width:200px;
|
||||
height:200px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size:100% 100%;
|
||||
position: absolute;
|
||||
margin-left: 1050px;
|
||||
margin-top: 400px;
|
||||
-webkit-transform-style:preserve-3d;
|
||||
-webkit-transform:rotateX(13deg);
|
||||
-webkit-animation:move 10s linear infinite;
|
||||
}
|
||||
.minbox{
|
||||
width:200px;
|
||||
height:200px;
|
||||
position: absolute;
|
||||
left:50px;
|
||||
top:30px;
|
||||
-webkit-transform-style:preserve-3d;
|
||||
}
|
||||
.minbox li{
|
||||
width:100px;
|
||||
height:100px;
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.minbox li:nth-child(1){
|
||||
background: url("image/1.jpg") no-repeat 0 0;
|
||||
-webkit-transform:translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.minbox li:nth-child(2){
|
||||
background: url("image/2.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateY(90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.minbox li:nth-child(3){
|
||||
background: url("image/3.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateX(-90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.minbox li:nth-child(4){
|
||||
background: url("image/4.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateX(90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.minbox li:nth-child(5){
|
||||
background: url("image/440.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateY(-90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.minbox li:nth-child(6){
|
||||
background: url("image/739.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateY(90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(1){
|
||||
background: url("image/756.jpg") no-repeat 0 0;
|
||||
-webkit-transform:translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(2){
|
||||
background: url("image/1.jpg") no-repeat 0 0;
|
||||
/*-webkit-transform:translateZ(10px);*/
|
||||
-webkit-transform:rotateY(-90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(3){
|
||||
background: url("image/police.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateX(-90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(4){
|
||||
background: url("image/秃头.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateX(180deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(5){
|
||||
background: url("image/ZNS.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateY(-90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox li:nth-child(6){
|
||||
background: url("image/timg.jpg") no-repeat 0 0;
|
||||
-webkit-transform:rotateY(90deg) translateZ(50px);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.maxbox{
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -20px;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
|
||||
}
|
||||
.maxbox li{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
/*border:1px solid #ccc;*/
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.9;
|
||||
-webkit-transition:all 0.7s ease;
|
||||
}
|
||||
.maxbox li:nth-child(1){
|
||||
-webkit-transform:rotateY(-90deg) translateZ(100px);
|
||||
}
|
||||
.maxbox li:nth-child(2){
|
||||
-webkit-transform:rotateY(-90deg) translateZ(100px);
|
||||
}
|
||||
.maxbox li:nth-child(3){
|
||||
-webkit-transform:rotateX(-90deg) translateZ(100px);
|
||||
}
|
||||
.maxbox li:nth-child(4){
|
||||
-webkit-transform:rotateX(90deg) translateZ(100px);
|
||||
}
|
||||
.maxbox li:nth-child(5){
|
||||
-webkit-transform:rotateY(-90deg) translateZ(100px);
|
||||
}
|
||||
.maxbox li:nth-child(6){
|
||||
-webkit-transform:rotateY(90deg) translateZ(100px);
|
||||
}
|
||||
.box:hover ol li:nth-child(1){
|
||||
-webkit-transform:translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
.box:hover ol li:nth-child(2){
|
||||
-webkit-transform:rotateX(180deg) translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
.box:hover ol li:nth-child(3){
|
||||
-webkit-transform:rotateX(-90deg) translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
.box:hover ol li:nth-child(4){
|
||||
-webkit-transform:rotateX(90deg) translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
.box:hover ol li:nth-child(5){
|
||||
-webkit-transform:rotateY(-90deg) translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
.box:hover ol li:nth-child(6){
|
||||
-webkit-transform:rotateY(90deg) translateZ(300px);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
opacity: 0.8;
|
||||
left: -100px;
|
||||
top: -100px;
|
||||
}
|
||||
@keyframes move{
|
||||
0%{
|
||||
-webkit-transform: rotateX(13deg) rotateY(0deg);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform:rotateX(13deg) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>最美逆行者</title>
|
||||
<link type="text/css" rel="stylesheet" href="index.css">
|
||||
<!--<link rel="stylesheet" href="ResetCSS.css">-->
|
||||
<style type="text/css">
|
||||
.vce h3{
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
font-family: 华文行楷;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 870px;
|
||||
/*color: red;*/
|
||||
background-image: linear-gradient(to right,black,coral);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.vce p{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 40px;
|
||||
top: 760px;
|
||||
font-size: 40px;
|
||||
font-family: 方正舒体;
|
||||
}
|
||||
.vce1{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("image/82.jpg");
|
||||
background-repeat: no-repeat;
|
||||
float: left;
|
||||
/*background-image: url("image/flag.jpg");*/
|
||||
}
|
||||
.vce2{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right,#ff46e9, peachpuff);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="vce1"></div>
|
||||
<div class="vce2">
|
||||
<div class="vce">
|
||||
<h3>致敬新时代最可爱的人</h3>
|
||||
<p> -张珂源 张玉玺 周辉 周亮<br><span>     2021.6.8</span></p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<ul class="minbox">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ol class="maxbox">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue