香蕉尹人在线观看免费下载,亚洲精品tv久久久

標(biāo)題: 女友生日到了想設(shè)計一個生日界面網(wǎng)頁 [打印本頁]

作者: whisperyourname 時間: 2018-6-18 10:53
標(biāo)題: 女友生日到了想設(shè)計一個生日界面網(wǎng)頁
我想做一個生日網(wǎng)頁界面，但是自己是新手完全不會，女友生日快到了。沒辦法，用其他的網(wǎng)頁代碼修改一下也行，求大神幫忙，我這有模板，

<div class="button-style1">
<a href="Memories.html" class="lk1">
      <div class="link1">
         <div class="bt1">
            我很喜歡
         </div>
      </div>
</a>
</div>
<div class="button-style2">
<a class="lk2">
      <div class="link2">
         <div class="bt1">
            我不喜歡
         </div>
      </div>
</a>
</div>

<div class="section">
      <div class="ly-box01">
         <div class="ly-txt01">
            <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
         </div>
         <div class="ly-txt02">
            <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
            <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
         </div>
      </div>
   </div>

.button-style1 ,.button-style2{
      position:absolute;
      top:41%;
      opacity:1;
      z-index:100;
}
.button-style1 {
      position:absolute;
      left:20%;
      animation:btn1 15s; /*這是CSS3的動畫屬性，著這里定義動畫的名稱和持續(xù)時間，也可以用animation-delay定義動畫延時多少s播放*/
}
.button-style2 {
      position:absolute;
      left:68%;
      animation:btn2 15s;
}
@keyframes btn1 { /*這里是對動畫的定義，我們只需要定義幾個關(guān)鍵幀，它會自動完成補間。*/
      0% {
            opacity:0;
            left:43.5%;
      }
      70% {
            opacity:0;
            left:43.5%;
      }
      100% {
            opacity:1;
            left:20%;
      }
}
@-webkit-keyframes btn1 { /*這里是聲明獲取不同瀏覽器的支持，還有幾個干脆我就懶得寫了，反正我也不是給所有人寫的，自己能看就行*/
      0% {
            opacity:0;
            left:43.5%;
      }
      70% {
            opacity:0;
            left:43.5%;
      }
      100% {
            opacity:1;
            left:20%;
      }
}
@keyframes btn2 {
      0% {
            opacity:0;
            left:43.5%;
      }
      70% {
            opacity:0;
            left:43.5%;
      }
      100% {
            opacity:1;
            left:68%;
      }
}
@-webkit-keyframes btn2 {
      0% {
            opacity:0;
            left:43.5%;
      }
      70% {
            opacity:0;
            left:43.5%;
      }
      100% {
            opacity:1;
            left:68%;
      }
}
.lk1,.lk2 {
      text-decoration:none;
      font-family: Microsoft YaHei;
      color:#fff;
      transition:all 0.5s;
}
.link1,.link2 {
      width:170px;
      height:60px;
      border:2px solid #fff;
      -webkit-border:1px solid #fff;
      border-radius:30px;
      font-size: 23px;
      text-align:center;
      background: #ee9ca7;
      transition:all 0.8s;
}
.link2 {
      cursor:not-allowed;
}
.bt1,.bt2 {
      position:relative;
      top:22%;
      vertical-align:middle;
}
a.lk1:hover { /*這里使用CSS選擇器，定義鼠標(biāo)滑過效果*/
      color:#ee9ca7;
      transition:all 0.5s;
}
.link1:hover {
      background-color:#fff;
      background-color:rgba(255,255,255,0,2);
      border:2px solid #BBB;
      transition:all 0.8s;
}
a.lk2:hover {
      color:#ee9ca7;
      transition:all 0.5s;
}
.link2:hover {
      background-color:#fff;
      background-color:rgba(255,255,255,0,2);
      border:2px solid #BBB;
      transition:all 0.8s;
}

作者: whisperyourname 時間: 2018-6-18 10:57
.button-style1 ,.button-style2{
position:absolute;
top:41%;
opacity:1;
z-index:100;
}
.button-style1 {
position:absolute;
left:20%;
animation:btn1 15s; /*這是CSS3的動畫屬性，著這里定義動畫的名稱和持續(xù)時間，也可以用animation-delay定義動畫延時多少s播放*/
}
.button-style2 {
position:absolute;
left:68%;
animation:btn2 15s;
}
@keyframes btn1 { /*這里是對動畫的定義，我們只需要定義幾個關(guān)鍵幀，它會自動完成補間。*/
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:20%;
}
}
@-webkit-keyframes btn1 { /*這里是聲明獲取不同瀏覽器的支持，還有幾個干脆我就懶得寫了，反正我也不是給所有人寫的，自己能看就行*/
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:20%;
}
}
@keyframes btn2 {
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:68%;
}
}
@-webkit-keyframes btn2 {
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:68%;
}
}
.lk1,.lk2 {
text-decoration:none;
font-family: Microsoft YaHei;
color:#fff;
transition:all 0.5s;
}
.link1,.link2 {
width:170px;
height:60px;
border:2px solid #fff;
-webkit-border:1px solid #fff;
border-radius:30px;
font-size: 23px;
text-align:center;
background: #ee9ca7;
transition:all 0.8s;
}
.link2 {
cursor:not-allowed;
}
.bt1,.bt2 {
position:relative;
top:22%;
vertical-align:middle;
}
a.lk1:hover { /*這里使用CSS選擇器，定義鼠標(biāo)滑過效果*/
color:#ee9ca7;
transition:all 0.5s;
}
.link1:hover {
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2px solid #BBB;
transition:all 0.8s;
}
a.lk2:hover {
color:#ee9ca7;
transition:all 0.5s;
}
.link2:hover {
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2px solid #BBB;
transition:all 0.8s;
}

歡迎光臨 (http://www.torrancerestoration.com/bbs/)