【没去】: 你又不快乐《手机壁纸》

没去发表于 2017-1-17 17:36:48

本帖最后由没去于 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>

没去发表于 2017-1-17 17:36:49

<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>

没去发表于 2017-1-17 17:36:50

本帖最后由 QQmcc-魔王于 2017-1-17 19:44 编辑 <br /><br />**** Hidden Message *****

QQmcc-没来 发表于 2017-1-17 17:37:23

本帖最后由 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:37:41

本帖最后由 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>

别等风离开 发表于 2017-1-17 17:52:18

很酷！

陳软发表于 2017-1-17 19:06:52

疚梦不知醒

猪头笑话 发表于 2017-1-17 19:28:50

感谢分享

shy 发表于 2017-1-17 19:57:57

感谢分享~

小百合 发表于 2017-1-17 20:04:58

为什么你这么酷

页: [1] 2 3 4 5 6 7 8 9 10

QQMCC论坛's Archiver

【没去】: 你又不快乐 《手机壁纸》

【没去】: 你又不快乐《手机壁纸》