【没去】: 你又不快乐 《手机壁纸》
本帖最后由 没去 于 2017-1-17 17:36 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.all {
width: 950px;
height: 4400px;
background:black;
margin: auto;
}
.title{
font: 9vw/1 Permanent Marker;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 60vh;
text-align: center;
background:url("http://attachment.qqmcc.net/attachment/album/201701/17/165631k4d2pi8dikfpip38.jpg");
background-size:100% 100%;
color: snow;
}
.title span {
-webkit-animation: glow 2s ease-in-out both infinite;
animation: glow 2s ease-in-out both infinite;
}
.input{
margin: 10px 30px;
text-align:center;
}
.input input{
width: 200px;
height: 25px;
border-radius: 8px;
background-color:transparent;
font-family: "agency fb";
font-size: 18px;
color:white;
}
.input button{
width: 80px;
height: 29px;
background:transparent ;
border-radius: 8px;
font-family: "agency fb";
font-size: 16px;
color:white;
}
.title_a{
width: 250px;
height: 250px;
margin: auto;
background: url("http://attachment.qqmcc.net/attachment/album/201701/16/140143u9nd5ammvyp5hpci.jpg");
background-size:100% 100%;
margin-top: 50px;
border-radius: 50%;
}
.title_a img{
width: 150px;
height: 150px;
}
.title_b{
width: 250px;
height: 50px;
margin: 210px 100px;
line-height: 50px;
text-align: center;
background: rgba(255,255,255,0.4);
position: absolute;
font-size: 21px;
font-family: "微软雅黑";
}
.title_c{
text-align: center;
margin-top: 100px;
font-family: "arial narrow";
font-weight: 900;
font-size: 60px;
background:url("http://attachment.qqmcc.net/attachment/album/201701/17/134051wj5xng8x5pg0lsfx.jpg") center bottom;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.body{
margin-top: 100px;
text-align: center;
}
.body img{
width: 300px;
height: 500px;
margin: 20px;
border: 1px solid #ddd;
padding: 4px;
}
.body img:hover{
border-radius:10px;
}
.body_a{
margin-top: 100px;
text-align: center;
font-weight: bold;
font-family: "微软雅黑";
font-size: 25px;
background:url("http://attachment.qqmcc.net/attachment/album/201701/17/134051wj5xng8x5pg0lsfx.jpg") center bottom;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.body_a span{
font-size: 35px;
}
.foot{
text-align: right;
}
.foot img{
width: 250px;
height: 250px;
}
span:nth-child(1) {
-webkit-animation-delay: -0.28571s;
animation-delay: -0.28571s;
}
span:nth-child(2) {
-webkit-animation-delay: -0.57143s;
animation-delay: -0.57143s;
}
span:nth-child(3) {
-webkit-animation-delay: -0.85714s;
animation-delay: -0.85714s;
}
span:nth-child(4) {
-webkit-animation-delay: -1.14286s;
animation-delay: -1.14286s;
}
span:nth-child(5) {
-webkit-animation-delay: -1.42857s;
animation-delay: -1.42857s;
}
span:nth-child(6) {
-webkit-animation-delay: -1.71429s;
animation-delay: -1.71429s;
}
span:nth-child(7) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
@-webkit-keyframes glow {
0%, 100% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato;
}
33% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan;
}
66% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow;
}
}
@keyframes glow {
0%, 100% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato;
}
33% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan;
}
66% {
text-shadow: 0 0 8.33333px snow, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow;
}
}
</style>
</head>
<body>
<div class="all">
<div class="title">
<span>你</span><span>又</span><span>不</span><span>快</span><span>乐</span>
</div>
<div class="input">
<input value="摆设" alt="摆设" />
<button>搜索</button>
</div>
<div class="title_a">
<div class="title_b">
所有人都孤独 你孤独什么
</div>
</div>
<div class="title_c">
I WANT YOU<br/>
NO ONE KNOWS IT<br/><br/>
</div>
<div class="body">
http://attachment.qqmcc.net/attachment/album/201701/17/170722xypgheqozkczyqkh.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170723a9g5go906ofo0r50.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170723j0u0p11qouunk1bf.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170723lxnbr77737nx77z5.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170724ownfdb4djn0jnnwm.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170725ym41s14slvgvv34h.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170725j0i0fhcxf5rhr00v.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170726vlvajor33gttkluu.pnghttp://attachment.qqmcc.net/attachment/album/201701/17/170726e6t36iz62j12420n.jpghttp://attachment.qqmcc.net/attachment/album/201701/17/170727hxi22ihrr22vsbs2.jpg
</div>
<div class="body_a">
跌入<span>尘埃</span>
</div>
<div class="foot">
</div>
</div>
</body>
</html>
<div class="all">
<div class="title">
<span>你</span><span>孤</span><span>独</span><span>什</span><span>么</span>
</div>
<div class="input">
<input value="摆设" alt="摆设">
<button>搜索</button>
</div>
<div class="title_a">
<div class="title_b">
所有人都孤独 你孤独什么
</div>
</div>
<div class="title_c">
I WANT YOU<br>
NO ONE KNOWS IT<br><br>
</div>
<div class="body">
<img src="http://attachment.qqmcc.net/attachment/album/201701/17/170727o8ox323pdavf28v8.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170728rm7fp8mn17pjz7rw.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170728u4cbfth1vfh8fobz.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170729mmvr77rmprmizmm6.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170729jhblmemdkmec7k7g.png" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170730xmxtxlhttom2hu6p.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170730p9cn9gpynsmayfx9.png" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170731qehuu515zyd1hwlc.jpg" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170732g0ddxdklnkirhyri.png" border="0" alt="" style="max-width:400px"><img src="http://attachment.qqmcc.net/attachment/album/201701/17/170733u9969t3ttp4o0zz7.jpg" border="0" alt="" style="max-width:400px">
</div>
<div class="body_a">
疚梦<span>不知醒</span>
</div>
<div class="foot">
</div>
</div>
本帖最后由 QQmcc-魔王 于 2017-1-17 19:44 编辑 <br /><br />**** Hidden Message ***** 本帖最后由 QQmcc-没来 于 2017-1-17 17:41 编辑 <br /><br />
<style type="text/css">
.zz{
background: black;
width: 800px;
height: 600px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}
.content{
position: relative;
width: 750px;
margin: 0 auto;}
.klam p{
margin: 0;
padding: 0;
font-size: 90px; }
.klam {
position: absolute;
top: 40px;
left: 100px;
color: #000;
z-index: 1;
animation: shadow 6.0s ease-in-out infinite;
}
.noor {
position: absolute;
top: 30px;
left: 50px;
width: 140px;
height: 140px;
opacity: 0.8;
border-radius: 100px;
z-index: 0;
background:
-webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0px 0px 50px #fff;
animation: noor 6.0s ease-in-out infinite;
}
.two {z-index: 2;opacity: 0.8;}
.body_z{
position: absolute;
width: 200px;
height: 200px;
margin: auto;
background: red;
margin: 220px 300px;
background: url("http://attachment.qqmcc.net/attachment/album/201612/30/143238iui22nzc5k589j94.jpg");
background-size:100% 100% ;
border-radius: 100px 1px;
z-index: 2;
}
.body_y{
position: absolute;
width: 400px;
height: 150px;
line-height:150px;
background: whitesmoke;
margin: 400px 190px;
border-radius:8px ;
z-index: 1;
text-align: center;
font-size: 18px;
font-family: "微软雅黑";
color: #222222;
}
@-webkit-keyframes noor {
0% {left: 45px;}
50% {left: 335px;}
75%{left:500px;}
100% {left: 45px;}
}
@-webkit-keyframes shadow {
0% {text-shadow: -9px 1px 4px #000;}
50% {text-shadow: 9px 1px 4px #000; }
100% {text-shadow: -9px 1px 4px #000;}
}
</style>
<div class="zz">
<div class="content">
<div class="klam">
<p>疚梦不知醒</p>
</div>
<div class="noor one"></div>
<div class="noor two"></div>
</div>
<div class="body_z">
</div>
<div class="body_y">
关于你来 我没有走
</div>
</div>
本帖最后由 QQmcc-没来 于 2017-1-17 17:42 编辑 <br /><br />
<style type="text/css">
.yy{
background: black;
width: 800px;
height: 600px;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
}
.content{
position: relative;
width: 750px;
margin: 0 auto;}
.klam p{
margin: 0;
padding: 0;
font-size: 90px; }
.klam {
position: absolute;
top: 40px;
left: 100px;
color: #000;
z-index: 1;
animation: shadow 6.0s ease-in-out infinite;
}
.noor {
position: absolute;
top: 30px;
left: 50px;
width: 140px;
height: 140px;
opacity: 0.8;
border-radius: 100px;
z-index: 0;
background:
-webkit-radial-gradient(center, ellipse cover, #fff 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0px 0px 50px #fff;
animation: noor 6.0s ease-in-out infinite;
}
.two {z-index: 2;opacity: 0.8;}
.body_x{
position: absolute;
width: 200px;
height: 200px;
margin: auto;
background: red;
margin: 220px 300px;
background: url("http://attachment.qqmcc.net/attachment/album/201612/30/143238iui22nzc5k589j94.jpg");
background-size:100% 100% ;
border-radius: 100px 1px;
z-index: 2;
}
.body_g{
position: absolute;
width: 400px;
height: 150px;
line-height:150px;
background: whitesmoke;
margin: 400px 190px;
border-radius:8px ;
z-index: 1;
text-align: center;
font-size: 18px;
font-family: "微软雅黑";
color: #222222;
}
@-webkit-keyframes noor {
0% {left: 45px;}
50% {left: 335px;}
75%{left:500px;}
100% {left: 45px;}
}
@-webkit-keyframes shadow {
0% {text-shadow: -9px 1px 4px #000;}
50% {text-shadow: 9px 1px 4px #000; }
100% {text-shadow: -9px 1px 4px #000;}
}
</style>
<div class="yy">
<div class="content">
<div class="klam">
<p>你快乐什么</p>
</div>
<div class="noor one"></div>
<div class="noor two"></div>
</div>
<div class="body_x">
</div>
<div class="body_g">
关于你来 我没有走
</div>
</div>
很酷! 疚梦不知醒 感谢分享 感谢分享~ 为什么你这么酷