|
|
我想做一個(gè)生日網(wǎng)頁(yè)界面，但是自己是新手完全不會(huì)，女友生日快到了。沒(méi)辦法，用其他的網(wǎng)頁(yè)代碼修改一下也行，求大神幫忙，我這有模板，
<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的動(dòng)畫屬性，著這里定義動(dòng)畫的名稱和持續(xù)時(shí)間，也可以用animation-delay定義動(dòng)畫延時(shí)多少s播放*/
}
.button-style2 {
position:absolute;
left:68%;
animation:btn2 15s;
}
@keyframes btn1 { /*這里是對(duì)動(dòng)畫的定義，我們只需要定義幾個(gè)關(guān)鍵幀，它會(huì)自動(dòng)完成補(bǔ)間。*/
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:20%;
}
}
@-webkit-keyframes btn1 { /*這里是聲明獲取不同瀏覽器的支持，還有幾個(gè)干脆我就懶得寫了，反正我也不是給所有人寫的，自己能看就行*/
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)滑過(guò)效果*/
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;
}
|
|
