1.上下滑动特效
代码结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
width: 200px;
height: 30px;
margin: 30px auto;
background-color: #0000FF;
display: block;
outline: none;
border: none;
position: relative;
z-index: 1;
color: #fff;
}
.btns:before {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transform-origin: center bottom;
transform: scaleY(0);
background-color: red;
transition: transform 0.4s ease-in-out;
}
.btns:hover {
cursor: pointer;
}
.btns:hover:before {
transform: scaleY(1);
transform-origin: center top;
}
</style>
</head>
<body>
<button type="button" class="btns">上下滑动</button>
</body>
</html>
2.左右震动特效
代码结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
margin: 50px auto;
display: block;
position: relative;
z-index: 1;
background-color: #0000FF;
outline: none;
border: none;
width: 300px;
height: 40px;
color: #fff;
}
.btns:hover {
cursor: pointer;
animation: dong 0.4s;
}
@keyframes dong {
0%,
100% {
transform: scale(1, 1);
}
25%,
75% {
transform: scale(0.95, 1.1);
}
50% {
transform: scale(1.1, 0.95);
}
}
</style>
</head>
<body>
<button type="button" class="btns">左右震动动效</button>
</body>
</html>
3.左右放大动效
代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btns {
margin: 50px auto;
display: block;
position: relative;
z-index: 1;
background-color: #0000FF;
outline: none;
border: none;
width: 300px;
height: 40px;
color: #fff;
}
.btns:hover {
cursor: pointer;
}
.btns:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 4px solid #0000FF;
transform: scale(1);
transform-origin: center;
}
.btns:hover:before {
transition: all 0.4s ease-out;
border: 1px solid #0000FF;
transform: scale(1.1);
opacity: 0;
}
</style>
</head>
<body>
<button type="button" class="btns">左右放大动效</button>
</body>
</html>
4.倾斜的闪光特效
代码特效：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倾斜的闪光特效</title>
<style type="text/css">
.btns {
outline: none;
border: none;
z-index: 1;
position: relative;
color: white;
background: #262626;
padding: 0.5em 1em;
overflow: hidden;
/* --shine-width: 1.25em; */
margin:50px auto;
width:100px;
display:block;
}
.btns:after {
content: "";
z-index: -1;
position: absolute;
background: red;
top: -100%;
height:20px;
left: 0%;
bottom: -50%;
width:100px;
transform: translate3d(-200%, 0, 0) rotate(125deg);
/* */
}
.btns:hover {
cursor: pointer;
}
.btns:hover:after {
transition: transform 0.8s ease-in-out;
transform: translate3d(100%, 236%, 0) rotate(125deg);
}
</style>
</head>
<body>
<button type="button" class="btns">闪光特效</button>
</body>
</html>
5.气泡特效
代码结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btns {
outline: none;
border: none;
cursor: pointer;
color: white;
position: relative;
width: 100px;
display: block;
margin: 50px auto;
padding: 0.5em 1em;
background-color: #40a9ff;
z-index: 1;
overflow: hidden;
}
.btns:before {
z-index: -1;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
border-radius: 50%;
background-color:red;
transform-origin: center;
transform: translate3d(-50%, -50%, 0) scale(0, 0);
transition: transform 0.4s ease-in-out;
}.btns:hover:before {
transform: translate3d(-50%, -50%, 0) scale(10,10);
}
</style>
</head>
<body>
<button type="button" class="btns">气泡特效</button>
<!-- 首先，还是去掉 button 元素的默认样式-->
<!-- 然后：由于 button 的伪元素层级是覆盖 button 的，设置 z-index 属性，防止伪元素遮盖显示。只想要背景色的遮盖，字体不需要遮盖。 -->
<!-- 最后：伪元素的变化效果。特效是从中心向四周蔓延，让其居中。大小变化，还是利用scale属性。圆形，所以将border-radius设置为 50%即可。 -->
</body>
</html>
6.左右滑动特效
代码结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左右滑动特效</title>
<style type="text/css">
.btns {
outline: none;
border: none;
cursor: pointer;
color: white;
position: relative;
width: 100px;
display: block;
margin: 50px auto;
padding: 0.5em 1em;
background-color: #40a9ff;
z-index: 1;
overflow: hidden;
}
button::before {
z-index: -1;
content: "";
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #9254de;
top: 0;
left: 0;
transform-origin: center;
transform: scale3d(0, 0, 0);
transition: transform 0.45s ease-in-out;
}
button:hover::before {
transform: scale3d(20,20, 20);
}
</style>
</head>
<body>
<button type="button" class="btns">气泡特效</button>
</body>
</html>