CSS3簡(jiǎn)單的砸金蛋樣式怎么寫

這篇文章主要介紹“CSS3簡(jiǎn)單的砸金蛋樣式怎么寫”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS3簡(jiǎn)單的砸金蛋樣式怎么寫”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供番禺網(wǎng)站建設(shè)、番禺做網(wǎng)站、番禺網(wǎng)站設(shè)計(jì)、番禺網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、番禺企業(yè)網(wǎng)站模板建站服務(wù)，十載番禺做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)樣式：

1、鼠標(biāo)移入后，鼠標(biāo)樣式圖標(biāo)變?yōu)椤板N子”。

2、用戶砸金蛋，錘子簡(jiǎn)單的揚(yáng)起效果。

3、砸碎金蛋，顯示內(nèi)容。

分析實(shí)現(xiàn)步驟：

1、在html中插入一顆金蛋

找一張靜態(tài)圖片或帶一點(diǎn)效果的動(dòng)態(tài)圖，直接放入img標(biāo)簽即可。

2、鼠標(biāo)移入，改變鼠標(biāo)樣式圖標(biāo)

系統(tǒng)自帶的鼠標(biāo)樣式就那幾種，可以通過CSS修改，簡(jiǎn)單的一句代碼：

cursor: url("./IMG/chuizi1.png"), default;

只是需要給定改變樣式時(shí)的前提要求，此處要求是鼠標(biāo)移入改變，即hover時(shí)改變：

body>div aside label img:hover {

cursor: url("./IMG/chuizi1.png"), default;

}

url內(nèi)為自己選擇的“錘子”樣式。

</pre>

3、當(dāng)用戶砸蛋時(shí)，讓錘子揚(yáng)起來

因?yàn)橹荒苁褂肅SS，那只有利用鼠標(biāo)的點(diǎn)擊狀態(tài)（按住鼠標(biāo)左鍵）來實(shí)現(xiàn)了，當(dāng)用戶點(diǎn)擊鼠標(biāo)左鍵時(shí)，

改表鼠標(biāo)樣式，和上一步一樣，只是改變樣式時(shí)的前提要求不同，這一步為active時(shí)改變：

body>div aside label img:active {

cursor: url("./IMG/chuizi2.png"), default;

}

注：錘子揚(yáng)起來和沒揚(yáng)起來，給兩個(gè)錘子揚(yáng)起角度不同的圖片即可：

移入顯示chuizi1,按住鼠標(biāo)左鍵顯示chuizi2，就會(huì)有一種把錘子揚(yáng)起來的視覺效果。

4、用戶砸蛋過后，顯示結(jié)果

首先，砸金蛋分兩個(gè)狀態(tài)，砸蛋前、砸蛋后，前面三步為砸蛋前狀態(tài)，第四步為砸蛋后狀態(tài)，為了把狀態(tài)區(qū)分開，

想到偽類選擇器有訪問前和訪問后兩個(gè)狀態(tài)，但是只能用于鏈接標(biāo)簽a，此處不適用，就想到了form表單

里面的復(fù)選框，它有選中和不選中兩種情況，和砸蛋前、砸蛋后相符合，就用它了；

其次，狀態(tài)區(qū)別出來了，變?yōu)樵业昂蟮臓顟B(tài)，要讓頁面當(dāng)中內(nèi)容改變，只有通過隱藏頁面中的圖片，然后

把結(jié)果用背景圖的方式展示出來

/* 當(dāng)選中時(shí)，隱藏圖片 */

body>div aside input:checked+label>img {

display: none;

}

/* 當(dāng)選中時(shí)，用背景的方式顯示結(jié)果 */

body>div aside input:checked+label {

animation: zadan linear 1 8s;

background-size: 200px 200px;

}

注:我設(shè)置了幾張圖片的動(dòng)畫顯示：animation: zadan linear 1 8s;，這樣結(jié)果會(huì)過渡得更好看，動(dòng)畫結(jié)果固定顯示：background-image: url("./IMG/dan5.jpg");

下面是完整代碼：

<!DOCTYPE html>

<head>

<style>

/* 砸蛋動(dòng)畫 */

@keyframes zadan {

0% {

}

30% {

}

60% {

}

90% {

}

body>div {

width: 100%;

}

body>div aside {

width: 200px;

margin: 70px auto 0px;

height: 200px;

}

/* 隱藏復(fù)選框默認(rèn)樣式 */

body>div aside input {

display: none;

}

body>div aside label {

width: 200px;

height: 200px;

display: block;

}

body>div aside label img {

width: 200px;

height: 200px;

}

/* 鼠標(biāo)移入改變樣式 */

body>div aside label img:hover {

cursor: url("./IMG/chuizi1.png"), default;

}

/* 鼠標(biāo)左擊時(shí)樣式 */

body>div aside label img:active {

cursor: url("./IMG/chuizi2.png"), default;

}

/* 當(dāng)選中時(shí)，隱藏圖片 */

body>div aside input:checked+label>img {

display: none;

}

/* 當(dāng)選中時(shí)，用背景的方式顯示結(jié)果 */

body>div aside input:checked+label {

animation: zadan linear 1 8s;

background-size: 200px 200px;

}

</style>

</head>

<body>

<div>

<aside>

</label>

</aside>

</div>

</body>

</html>

注意：蛋碎的圖片必須是自定義

關(guān)于“CSS3簡(jiǎn)單的砸金蛋樣式怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

名稱欄目：CSS3簡(jiǎn)單的砸金蛋樣式怎么寫
文章位置：http://www.rwnh.cn/article6/pgcoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、App設(shè)計(jì)、、網(wǎng)站改版、全網(wǎng)營(yíng)銷推廣、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

CSS3簡(jiǎn)單的砸金蛋樣式怎么寫