HTML5+CSS3做一個(gè)云朵特效按鈕的懸停效果骂澄，代碼簡單弧哎，沒什么難點(diǎn)哪轿，適合新手朋友拿來練手腐螟。
效果：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>云朵特效按鈕</title>
<link rel="stylesheet" href="../css/28.css">
</head>
<body>
<nav>
<ul>
<li>
點(diǎn)贊
<span></span><span></span><span></span><span></span>
</li>
<li>
關(guān)注
<span></span><span></span><span></span><span></span>
</li>
<li>
評(píng)論
<span></span><span></span><span></span><span></span>
</li>
<li>
轉(zhuǎn)發(fā)
<span></span><span></span><span></span><span></span>
</li>
</ul>
</nav>
</body>
</html>
body{
/* 初始化 取消頁面元素內(nèi)外邊距 */
margin: 0;
padding: 0;
/* 100%窗口高度 */
height: 100vh;
/* 彈性布局 水平窑业、垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 漸變背景 */
background: linear-gradient(200deg,#00c6fb,#66a6ff);
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav ul li{
/* 自定義屬性--c */
--c:#fff;
/* 通過var函數(shù)調(diào)用自定義屬性--c */
color: var(--c);
width: 240px;
height: 60px;
border: 3px solid var(--c);
border-radius: 10px;
text-align: center;
line-height: 60px;
font-weight: bold;
cursor: pointer;
/* 相對(duì)定位 */
position: relative;
/* 溢出隱藏 */
overflow: hidden;
z-index: 1;
/* 動(dòng)畫過渡 */
transition: 0.5s;
margin: 30px;
}
nav ul li:hover{
color: #222;
/* box-shadow: inset 0 0 0 1px var(--c); */
}
nav ul li span{
/* 絕對(duì)定位 */
position: absolute;
width: 25%;
height: 100%;
background-color: var(--c);
/* 先沿Y軸下移钦幔，移出按鈕范圍 */
transform: translateY(150%);
border-radius: 50%;
/* 通過var函數(shù)調(diào)用自定義屬性--n，結(jié)合calc函數(shù)計(jì)算得出left的值 */
left: calc((var(--n) - 1) * 25%);
transition: 0.5s;
/* 計(jì)算得出動(dòng)畫延遲時(shí)間 */
transition-delay: calc((var(--n) - 1) * 0.1s);
z-index: -1;
}
nav ul li:hover span{
/* 沿Y軸上移并放大 */
transform: translateY(0) scale(2);
}
nav ul li span:nth-child(1){
/* 自定義屬性 */
--n:1;
}
nav ul li span:nth-child(2){
--n:2;
}
nav ul li span:nth-child(3){
--n:3;
}
nav ul li span:nth-child(4){
--n:4;
}
