鼠标移入效果

qq_28510795 2017-11-24 06:08:06

其实不太想问这个问题，因为感觉大神都不玩游戏

不过还是发出来碰碰运气，说不定有大神玩游戏呢

就是一个鼠标移入的动态效果，从按钮中心像音波或者波纹一样向外扩散（呈圆形状），和平常见得又不太一样

就是WeGame客户端开始游戏那个按钮的移入效果，希望有大神玩游戏这样就可以帮帮我了

...全文

202 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-11-25

打赏
举报

这个没有背景纹理，要加纹理需要用背景图片


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.butt {
	position: relative;
	overflow: hidden;
	width: 200px;
	height: 80px;
	border-radius: 10px;
	background-color: #FF9900;
	border: 1px solid #333;
}
.butt::before {
	content: "";
	display: block;
	border-radius: 50%;
	background-color: #ffaa00;
	box-shadow: inset 0px 0px 50px #ffcc00;
	width: 0px;
	height: 0px;
	margin: 0px;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: all 500ms;
}
.butt::after {
	content: attr(data-text);
	display: block;
	color: #fff;
	text-shadow: 0px 0px 6px #A33D1B;
	font:35px/80px \5B8B\4F53;
	text-align: center;
	position: relative;
}
.butt:hover::before {
	width: 220px;
	height: 220px;
	margin: -110px;
}
</style>
</head>
<body>

<div class="butt" data-text="开始游戏"></div>

</body>
</html>

qq_28510795 2017-11-25