如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

本篇內(nèi)容介紹了“如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專業(yè)成都網(wǎng)站建設(shè)公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來(lái)客戶和效益!創(chuàng)新互聯(lián)建站為您提供成都網(wǎng)站建設(shè)，五站合一網(wǎng)站設(shè)計(jì)制作，服務(wù)好的網(wǎng)站設(shè)計(jì)公司，成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作負(fù)責(zé)任的成都網(wǎng)站制作公司!

我們先來(lái)看看效果圖

下面我們來(lái)研究一下是怎么實(shí)現(xiàn)這個(gè)效果的：

首先是HTML部分，定義一個(gè)div容器包裹button按鈕，在按鈕中使用<span>標(biāo)簽對(duì)來(lái)包含按鈕文本

<div id="shiny-shadow">
  <button><span>鼠標(biāo)懸停</span></button>
</div>

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

然后開始定義css樣式來(lái)進(jìn)行修飾：調(diào)整布局樣式、色彩范圍

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
}

span {
  z-index: 20;  
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

接著制作一閃而過(guò)的覆蓋層：

使用:after選擇器制作一個(gè)帶透明度的長(zhǎng)方形，讓它相對(duì)于button按鈕進(jìn)行絕對(duì)定位

button {
  position: relative;
}
button:after {
	content: '';
	display: block;
	position: absolute;
	background: white;
	width: 50px;
	height: 125px;
	opacity: 20%;
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

在最終效果中，一閃而過(guò)的是一個(gè)傾斜的長(zhǎng)方形；因此我們添加一個(gè)transform: rotate(-45deg);樣式

button:after {
	transform: rotate(-45deg);
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

使用top屬性和left屬性控制長(zhǎng)方形的位置

button:after {
	top: -2px;
	left: -1px;
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

最后實(shí)現(xiàn)按鈕懸停閃爍動(dòng)畫特效

因?yàn)槭菓彝ＰЧ?，所以要使用?code>:hover選擇器；我們要設(shè)置鼠標(biāo)懸停時(shí)長(zhǎng)方形的位置

button:hover:after {
  left: 120%;
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

這樣突然變換位置不是我們要的效果，可以使用transition屬性添加一個(gè)過(guò)渡效果，因?yàn)樵搶傩允莄ss3的一個(gè)新屬性，要添加前綴來(lái)兼容其他瀏覽器

button:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

大致實(shí)現(xiàn)了，再修飾一下。

只想要button按鈕范圍內(nèi)顯示長(zhǎng)方形覆蓋層，那么可給button標(biāo)簽添加一個(gè)overflow: hidden;樣式

button {
  overflow: hidden;
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

可以看出覆蓋層的位置還有點(diǎn)問(wèn)題，最終效果中覆蓋層一開始是不顯示的，我們使用top屬性和left屬性來(lái)調(diào)整一下

button:after {
	top: -36px;
	left: -100px;
}

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效

OK，大功告成！下面附上完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#shiny-shadow {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #1c2541;
			}

			button {
				border: 2px solid white;
				background: transparent;
				text-transform: uppercase;
				color: white;
				padding: 15px 50px;
				outline: none;
				position: relative;
				overflow: hidden;
			}

			span {
				z-index: 20;
			}

			button:after {
				content: '';
				display: block;
				position: absolute;
				background: white;
				width: 50px;
				height: 125px;
				opacity: 20%;
				transform: rotate(-45deg);
				top: -36px;
				left: -100px;
			}

			button:hover:after {
				left: 120%;
				transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
				-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
			}
		</style>
	</head>
	<body>
		<div id="shiny-shadow">
			<button><span>鼠標(biāo)懸停</span></button>
		</div>
	</body>
</html>

“如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

名稱欄目：如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效
新聞來(lái)源：http://www.rwnh.cn/article18/jsdidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站內(nèi)鏈、小程序開發(fā)、靜態(tài)網(wǎng)站、

聲明：本網(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í)需注明來(lái)源：創(chuàng)新互聯(lián)

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

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

如何使用CSS3實(shí)現(xiàn)按鈕懸停閃爍動(dòng)態(tài)特效