1. 模拟音频波纹加载效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
body {
padding : 120px;
}
.music {
width : 175px;
height : 100px;
display : flex;
}
.music span {
width : 6px;
border-radius : 18px;
margin-right : 6px;
}
.music span:nth-child(1) {
animation : bar1 2s 0.2s infinite linear;
}
.music span:nth-child(2) {
animation : bar2 2s 0.4s infinite linear;
}
.music span:nth-child(3) {
animation : bar3 2s 0.6s infinite linear;
}
.music span:nth-child(4) {
animation : bar4 2s 0.8s infinite linear;
}
.music span:nth-child(5) {
animation : bar5 2s 1.0s infinite linear;
}
.music span:nth-child(6) {
animation : bar6 2s 1.2s infinite linear;
}
.music span:nth-child(7) {
animation : bar7 2s 1.4s infinite linear;
}
.music span:nth-child(8) {
animation : bar8 2s 1.6s infinite linear;
}
.music span:nth-child(9) {
animation : bar9 2s 1.8s infinite linear;
}
@keyframes bar1 {
0% {
background : #f677b0;
margin-top : 25%;
height : 10%;
}
50% {
background : #f677b0;
height : 100%;
margin-top : 0%;
}
100% {
background : #f677b0;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar2 {
0% {
background : #df7ff2;
margin-top : 25%;
height : 10%;
}
50% {
background : #df7ff2;
height : 100%;
margin-top : 0%;
}
100% {
background : #df7ff2;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar3 {
0% {
background : #8c7ff2;
margin-top : 25%;
height : 10%;
}
50% {
background : #8c7ff2;
height : 100%;
margin-top : 0%;
}
100% {
background : #8c7ff2;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar4 {
0% {
background : #7fd0f2;
margin-top : 25%;
height : 10%;
}
50% {
background : #7fd0f2;
height : 100%;
margin-top : 0%;
}
100% {
background : #7fd0f2;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar5 {
0% {
background : #7ff2d3;
margin-top : 25%;
height : 10%;
}
50% {
background : #7ff2d3;
height : 100%;
margin-top : 0%;
}
100% {
background : #7ff2d3;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar6 {
0% {
background : #7ff2a0;
margin-top : 25%;
height : 10%;
}
50% {
background : #7ff2a0;
height : 100%;
margin-top : 0%;
}
100% {
background : #7ff2a0;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar7 {
0% {
background : #adf27f;
margin-top : 25%;
height : 10%;
}
50% {
background : #adf27f;
height : 100%;
margin-top : 0%;
}
100% {
background : #adf27f;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar8 {
0% {
background : #e7f27f;
margin-top : 25%;
height : 10%;
}
50% {
background : #e7f27f;
height : 100%;
margin-top : 0%;
}
100% {
background : #e7f27f;
height : 10%;
margin-top : 25%;
}
}
@keyframes bar9 {
0% {
background : #ecaa64;
margin-top : 25%;
height : 10%;
}
50% {
background : #ecaa64;
height : 100%;
margin-top : 0%;
}
100% {
background : #ecaa64;
height : 10%;
margin-top : 25%;
}
}
</ style>
</ head>
< body>
< div class = " music" >
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
< span> </ span>
</ div>
</ body>
</ html>
2. 模拟动态加载效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< meta http-equiv = " X-UA-Compatible" content = " ie=edge" >
< title> Document</ title>
< style>
.wrap {
margin : 120px 0 0 240px;
width : 75px;
height : 75px;
position : relative;
}
.round {
position : absolute;
width : 13px;
height : 13px;
border-radius : 50%;
background-color : rgb ( 241, 141, 157) ;
animation : circleRound 2.8s ease infinite;
transform-origin : 50% 75px;
}
.round:nth-child(1) {
z-index : 7;
}
.round:nth-child(2) {
height : 12px;
width : 12px;
background-color : rgb ( 199, 136, 185) ;
animation-delay : .2s;
z-index : 6;
}
.round:nth-child(3) {
height : 11px;
width : 11px;
background-color : rgb ( 153, 69, 223) ;
animation-delay : .4s;
z-index : 5;
}
.round:nth-child(4) {
height : 10px;
width : 10px;
background-color : rgb ( 69, 141, 223) ;
animation-delay : .6s;
z-index : 4;
}
.round:nth-child(5) {
height : 9px;
width : 9px;
background-color : rgb ( 69, 223, 203) ;
animation-delay : .8s;
z-index : 3;
}
.round:nth-child(6) {
height : 8px;
width : 8px;
background-color : rgb ( 100, 223, 69) ;
animation-delay : 1s;
z-index : 2;
}
.round:nth-child(7) {
height : 7px;
width : 7px;
background-color : rgb ( 223, 200, 69) ;
animation-delay : 1.2s;
z-index : 1;
}
@keyframes circleRound {
to {
transform : rotate ( 1turn) ;
}
}
</ style>
</ head>
< body>
< div class = " wrap" >
< div class = " round" > </ div>
< div class = " round" > </ div>
< div class = " round" > </ div>
< div class = " round" > </ div>
< div class = " round" > </ div>
< div class = " round" > </ div>
< div class = " round" > </ div>
</ div>
</ body>
</ html>
3. 模拟文字烟雾消散效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
.wrap {
width : 600px;
height : 480px;
box-sizing : border-box;
padding : 120px;
background-color : #fff;
color : transparent;
display : flex;
}
h3 {
text-shadow : 0 0 0 #e00;
animation : smoky 6s infinite;
}
@keyframes smoky {
60% {
text-shadow : 0 0 40px #fff;
}
100% {
text-shadow : 0 0 20px #fff;
transform : translate3d ( 15rem, -8rem, 0) rotate ( -40deg) skew ( 70deg) scale ( 1.5) ;
opacity : 0;
}
}
h3:nth-child(1) {
animation-delay : 1s;
}
h3:nth-child(2) {
animation-delay : 1.4s;
}
h3:nth-child(3) {
animation-delay : 1.8s;
}
h3:nth-child(4) {
animation-delay : 2.2s;
}
h3:nth-child(5) {
animation-delay : 2.6s;
}
</ style>
</ head>
< body>
< div class = " wrap" >
< h3> 我要</ h3>
< h3> 随风</ h3>
< h3> 飘散</ h3>
< h3> 啦</ h3>
< h3> ...</ h3>
</ div>
</ body>
</ html>
4. 模拟鼠标悬浮按钮边框线条动画效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
body {
background : #fff;
padding : 120px;
}
button {
display : inline-block;
border : none;
color : #000;
cursor : pointer;
margin : 12px 18px;
background : rgb ( 0, 255, 0) ;
position : relative;
}
span {
display : block;
padding : 18px 60px
}
button::before,
button::after {
content : "" ;
width : 0;
height : 2px;
position : absolute;
transition : all .2s linear;
background : #e00
}
span::before,
span::after {
content : "" ;
width : 2px;
height : 0;
position : absolute;
transition : all .2s linear;
background : #e00
}
button:hover::before,
button:hover::after {
width : 100%
}
button:hover span::before,
button:hover span::after {
height : 100%
}
.btn1::before,
.btn1::after {
transition-delay : .2s
}
.btn1 span::before,
.btn1 span::after {
transition-delay : 0s
}
.btn1::before {
right : 0;
top : 0
}
.btn1::after {
left : 0;
bottom : 0
}
.btn1 span::before {
left : 0;
top : 0
}
.btn1 span::after {
right : 0;
bottom : 0
}
.btn1:hover::before,
.btn1:hover::after {
transition-delay : 0s
}
.btn1:hover span::before,
.btn1:hover span::after {
transition-delay : .2s
}
.btn2::before,
.btn2::after {
transition-delay : 0s
}
.btn2 span::before,
.btn2 span::after {
transition-delay : .2s
}
.btn2::before {
right : 0;
top : 0
}
.btn2::after {
left : 0;
bottom : 0
}
.btn2 span::before {
left : 0;
top : 0
}
.btn2 span::after {
right : 0;
bottom : 0
}
.btn2:hover::before,
.btn2:hover::after {
transition-delay : .2s
}
.btn2:hover span::before,
.btn2:hover span::after {
transition-delay : 0s
}
.btn3::after {
left : 0;
bottom : 0;
transition-delay : .6s
}
.btn3 span::after {
transition-delay : .4s;
right : 0;
bottom : 0
}
.btn3::before {
right : 0;
top : 0;
transition-delay : .2s
}
.btn3 span::before {
transition-delay : 0s;
left : 0;
top : 0
}
.btn3:hover::after {
transition-delay : 0s
}
.btn3:hover span::after {
transition-delay : .2s
}
.btn3:hover::before {
transition-delay : .4s
}
.btn3:hover span::before {
transition-delay : .6s
}
.btn4::after {
right : 0;
bottom : 0;
transition-duration : .4s
}
.btn4 span::after {
right : 0;
bottom : 0;
transition-duration : .4s
}
.btn4::before {
left : 0;
top : 0;
transition-duration : .4s
}
.btn4 span::before {
left : 0;
top : 0;
transition-duration : .4s
}
.btn5::after {
left : 0;
bottom : 0;
transition-duration : .4s
}
.btn5 span::after {
right : 0;
top : 0;
transition-duration : .4s
}
.btn5::before {
right : 0;
top : 0;
transition-duration : .4s
}
.btn5 span::before {
left : 0;
bottom : 0;
transition-duration : .4s
}
.btn6::before {
left : 50%;
top : 0;
transition-duration : .4s
}
.btn6::after {
left : 50%;
bottom : 0;
transition-duration : .4s
}
.btn6 span::before {
left : 0;
top : 50%;
transition-duration : .4s
}
.btn6 span::after {
right : 0;
top : 50%;
transition-duration : .4s
}
.btn6:hover::before,
.btn6:hover::after {
left : 0
}
.btn6:hover span::before,
.btn6:hover span::after {
top : 0
}
</ style>
</ head>
< body>
< main>
< button class = " btn1" > < span> 悬浮上左、下右</ span> </ button>
< button class = " btn2" > < span> 悬浮右上、左下</ span> </ button>
< button class = " btn3" > < span> 悬浮之一圈线条</ span> </ button>
< button class = " btn4" > < span> 悬浮右下角和左上角两个方向延伸</ span> </ button>
< button class = " btn5" > < span> 悬浮右上角和左下角两个方向延伸</ span> </ button>
< button class = " btn6" > < span> 悬浮四个方向中间点往两端延伸</ span> </ button>
</ main>
</ body>
</ html>
5. 模拟鼠标悬浮手风琴样式展开图标效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< style>
body {
padding : 180px;
background-color : #ddd;
}
.item {
box-sizing : border-box;
display : inline-flex;
align-items : center;
height : 60px;
width : 60px;
margin : 4px 8px;
overflow : hidden;
background : #fff;
border-radius : 30px;
box-shadow : 0px 10px 10px rgba ( 0, 0, 0, 0.24) ;
transition : all 0.5s;
}
.item:hover {
width : 180px;
border : none;
}
.first:hover .icon {
background-color : pink;
}
.second:hover .icon {
background-color : #e9e9e9;
}
.third:hover .icon {
background-color : pink;
}
.fouth:hover .icon {
background-color : #e9e9e9;
}
.icon {
width : 60px;
height : 60px;
display : flex;
justify-content : center;
align-items : center;
border-radius : 30px;
font-size : 28px;
position : relative;
transition : all 0.5s;
pointer-events : none;
}
.item:nth-child(1) .icon::after {
position : absolute;
content : '我是 A' ;
width : fit-content;
word-break : keep-all;
font-size : medium;
left : 72px;
pointer-events : auto;
cursor : pointer;
}
.item:nth-child(2) .icon::after {
position : absolute;
content : '我是 B, 不是 A' ;
width : fit-content;
word-break : keep-all;
font-size : medium;
left : 72px;
pointer-events : auto;
cursor : pointer;
}
.item:nth-child(3) .icon::after {
position : absolute;
content : '我是 C' ;
width : fit-content;
word-break : keep-all;
font-size : medium;
left : 72px;
pointer-events : auto;
cursor : pointer;
}
.item:nth-child(4) .icon::after {
position : absolute;
content : '我是 D' ;
width : fit-content;
word-break : keep-all;
font-size : medium;
left : 72px;
pointer-events : auto;
cursor : pointer;
}
.icon:hover::after {
text-decoration : underline;
}
</ style>
</ head>
< body>
< div class = " item first" >
< div onclick = " clickAfter ( '红桃' ) " style = " color : #DD3B32; " class = " icon" > A</ div>
</ div>
< div class = " item second" >
< div onclick = " clickAfter ( '黑桃' ) " style = " color : #1A1A1A; " class = " icon" > B</ div>
</ div>
< div class = " item third" >
< div onclick = " clickAfter ( '方块' ) " style = " color : #FB1C17; " class = " icon" > C</ div>
</ div>
< div class = " item fouth" >
< div onclick = " clickAfter ( '梅花' ) " style = " color : #090B0A; " class = " icon" > D</ div>
</ div>
< script>
function clickAfter ( who ) {
console. log ( who) ;
}
</ script>
</ body>
</ html>