您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS3簡單的砸金蛋樣式怎么寫”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“CSS3簡單的砸金蛋樣式怎么寫”文章能幫助大家解決問題。
實現(xiàn)樣式:
1、鼠標(biāo)移入后,鼠標(biāo)樣式圖標(biāo)變?yōu)椤板N子”。
2、用戶砸金蛋,錘子簡單的揚起效果。
3、砸碎金蛋,顯示內(nèi)容。
分析實現(xiàn)步驟:
1、在html中插入一顆金蛋
找一張靜態(tài)圖片或帶一點效果的動態(tài)圖,直接放入img標(biāo)簽即可。
2、鼠標(biāo)移入,改變鼠標(biāo)樣式圖標(biāo)
系統(tǒng)自帶的鼠標(biāo)樣式就那幾種,可以通過CSS修改,簡單的一句代碼:
cursor: url("./IMG/chuizi1.png"), default;
只是需要給定改變樣式時的前提要求,此處要求是鼠標(biāo)移入改變,即hover時改變:
<pre style="max-width: 100%;">
body>div aside label img:hover {
cursor: url("./IMG/chuizi1.png"), default;
}
url內(nèi)為自己選擇的“錘子”樣式。
</pre>
3、當(dāng)用戶砸蛋時,讓錘子揚起來
因為只能使用CSS,那只有利用鼠標(biāo)的點擊狀態(tài)(按住鼠標(biāo)左鍵)來實現(xiàn)了,當(dāng)用戶點擊鼠標(biāo)左鍵時,
改表鼠標(biāo)樣式,和上一步一樣,只是改變樣式時的前提要求不同,這一步為active時改變:
<pre style="max-width: 100%;">
body>div aside label img:active {
cursor: url("./IMG/chuizi2.png"), default;
}
注:錘子揚起來和沒揚起來,給兩個錘子揚起角度不同的圖片即可:
移入顯示chuizi1,按住鼠標(biāo)左鍵顯示chuizi2,就會有一種把錘子揚起來的視覺效果。
4、用戶砸蛋過后,顯示結(jié)果
首先,砸金蛋分兩個狀態(tài),砸蛋前、砸蛋后,前面三步為砸蛋前狀態(tài),第四步為砸蛋后狀態(tài),為了把狀態(tài)區(qū)分開,
想到偽類選擇器有訪問前和訪問后兩個狀態(tài),但是只能用于鏈接標(biāo)簽a,此處不適用,就想到了form表單
里面的復(fù)選框,它有選中和不選中兩種情況,和砸蛋前、砸蛋后相符合,就用它了;
其次,狀態(tài)區(qū)別出來了,變?yōu)樵业昂蟮臓顟B(tài),要讓頁面當(dāng)中內(nèi)容改變,只有通過隱藏頁面中的圖片,然后
把結(jié)果用背景圖的方式展示出來
/* 當(dāng)選中時,隱藏圖片 */
body>div aside input:checked+label>img {
display: none;
}
/* 當(dāng)選中時,用背景的方式顯示結(jié)果 */
body>div aside input:checked+label {
animation: zadan linear 1 8s;
background-size: 200px 200px;
background-image: url("./IMG/dan5.jpg");
}
注:我設(shè)置了幾張圖片的動畫顯示:animation: zadan linear 1 8s;,這樣結(jié)果會過渡得更好看,動畫結(jié)果固定顯示:background-image: url("./IMG/dan5.jpg");
下面是完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>砸蛋</title>
<style>
/* 砸蛋動畫 */
@keyframes zadan {
0% {
background-image: url("./IMG/dan11.jpg");
}
30% {
background-image: url("./IMG/dan2.gif");
}
60% {
background-image: url("./IMG/dan3.gif");
}
90% {
background-image: url("./IMG/dan4.jpg");
}
}
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)左擊時樣式 */
body>div aside label img:active {
cursor: url("./IMG/chuizi2.png"), default;
}
/* 當(dāng)選中時,隱藏圖片 */
body>div aside input:checked+label>img {
display: none;
}
/* 當(dāng)選中時,用背景的方式顯示結(jié)果 */
body>div aside input:checked+label {
animation: zadan linear 1 8s;
background-size: 200px 200px;
background-image: url("./IMG/dan5.jpg");
}
</style>
</head>
<body>
<div>
<aside>
<input type="checkbox" id="zadan">
<label for="zadan">
<img src="./IMG/dan1.jpg" alt="">
</label>
</aside>
</div>
</body>
</html>
注意:蛋碎的圖片必須是自定義
關(guān)于“CSS3簡單的砸金蛋樣式怎么寫”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。