css3 hover 放大圈效果
lopo1983 发表了文章 • 1 个评论 • 2162 次浏览 • 2016-01-21 10:27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
html,
body {
height: 100%;
background-color: rgb(56, 81, 188);
}
.icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 60px 120px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}
.icon-mix .icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.icon-mix .icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.icon-mix .icon:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.icon-mix .icon:hover:after {
-webkit-animation: roundout 1.3s ease-out 75ms;
animation: roundout 1.3s ease-out 75ms;
}
@-webkit-keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="icon-mix">
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
</div>
</body>
</html>原本是帮一个妹纸写的效果 结果理解错误了 哈哈? 查看全部
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
html,
body {
height: 100%;
background-color: rgb(56, 81, 188);
}
.icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 60px 120px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}
.icon-mix .icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.icon-mix .icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.icon-mix .icon:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.icon-mix .icon:hover:after {
-webkit-animation: roundout 1.3s ease-out 75ms;
animation: roundout 1.3s ease-out 75ms;
}
@-webkit-keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="icon-mix">
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
</div>
</body>
</html>原本是帮一个妹纸写的效果 结果理解错误了 哈哈? 查看全部
<!DOCTYPE html>原本是帮一个妹纸写的效果 结果理解错误了 哈哈?
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
html,
body {
height: 100%;
background-color: rgb(56, 81, 188);
}
.icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 60px 120px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}
.icon-mix .icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.icon-mix .icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.icon-mix .icon:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}
.icon-mix .icon:hover:after {
-webkit-animation: roundout 1.3s ease-out 75ms;
animation: roundout 1.3s ease-out 75ms;
}
@-webkit-keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="icon-mix">
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
</div>
</body>
</html>