先上效果图：
水波动画：
边框动画：
1.水波动画
实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>水波动画</title> 6 ????<style> 7 ????????.water{ 8 ????????????width: 50px; 9 ????????????height: 50px;10 ????????????position: relative;11 ????????}12 ????????.point{13 ????????????position: absolute;14 ????????????border-radius: 50%;15 ????????????animation:border 2s linear infinite;16 ????????}17 ????????.point2{18 ????????????-webkit-animation-delay:.5s;19 ????????}20 ????????.point3{21 ????????????-webkit-animation-delay:1s;22 ????????}23 ????????.point4{24 ????????????-webkit-animation-delay:1.5s;25 ????????}26 27 ????????@keyframes border{28 ????????????from { 29 ????????????????width:0; ?30 ????????????????height:0; ?31 ????????????????top:50%; ?32 ????????????????left:50%; ?33 ????????????????background-color: rgba(235, 51, 36, 1);34 ????????????} ?35 ????????????to { 36 ????????????????width:100%; ?37 ????????????????height:100%; ?38 ????????????????top:0; ?39 ????????????????left:0; ?40 ????????????????background-color: rgba(235, 51, 36, 0);41 ????????????}42 ????????}43 ????</style>44 </head>45 <body>46 ????<div class="water">47 ????????<div class="point point1"></div>48 ????????<div class="point point2"></div>49 ????????<div class="point point3"></div>50 ????????<div class="point point4"></div>51 ????</div>52 </body>53 </html>2.边框动画:
实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>边框动画</title> 6 ????<style> 7 ????????.block{ 8 ????????????width: 100px; 9 ????????????height: 50px;10 ????????????position: relative;11 ????????????background-color: #fcfcfc;12 ????????????overflow: hidden;13 ????????}14 ????????.block:before{15 ????????????content: ‘‘;16 ????????????width: 0;17 ????????????height: 0;18 ????????????top: 0;19 ????????????left: -1px;20 ????????????display: block;21 ????????????border-top: 1px solid red;22 ????????????border-right: 1px solid red;23 ????????????position: absolute;24 ????????????z-index: 1;25 ????????}26 ????????.block:hover:before{27 ????????????content: ‘‘;28 ????????????width: 100%;29 ????????????height: 100%;30 ????????????border-radius: 5px;31 ????????????animation: border .5s linear 1;32 ????????}33 ????????.block:after{34 ????????????content: ‘‘;35 ????????????width: 0;36 ????????????height: 0;37 ????????????bottom: 0;38 ????????????right: -1px;39 ????????????display: block;40 ????????????position: absolute;41 ????????????z-index: 1;42 ????????????border-bottom: 1px solid red;43 ????????????border-left: 1px solid red;44 ????????}45 ????????.block:hover:after{46 ????????????content: ‘‘;47 ????????????width: 100%;48 ????????????height: 100%;49 ????????????border-radius: 5px;50 ????????????animation: border2 1s linear 1;51 ????????}52 ????????@keyframes border{53 ????????????0%{54 ????????????????width: 0;55 ????????????????height: 0;56 ????????????}57 ????????????50%{58 ????????????????width: 100%;59 ????????????????height: 0;60 ????????????}61 ????????????100%{62 ????????????????width: 100%;63 ????????????????height: 100%;64 ????????????}65 66 ????????}67 ????????@keyframes border2{68 ????????????0%{69 ????????????????width: 0;70 ????????????????height: 0;71 ????????????}72 ????????????50%{73 ????????????????width: 0;74 ????????????????height: 0;75 ????????????}76 ????????????75%{77 ????????????????width: 100%;78 ????????????????height: 0;79 ????????????}80 ????????????100%{81 ????????????????width: 100%;82 ????????????????height: 100%;83 ????????????}84 ????????}85 ????</style>86 </head>87 <body>88 ????<div class="block"></div>89 </body>90 </html>css动画Demo---水波动画和边框动画
原文地址：https://www.cnblogs.com/lyyyyy/p/9149746.html