css文字在图片下方_【CSS专题】文字下方绘制波浪线

一、上页面元素

class="wave-line"> <span class="wave-line-span">燃情岁月span></div>

二、上样式源码

.wave-line {  width: auto;}.wave-line-span::after {  content: "";  display: block;  height: 6px;  width: 60px;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;   background-size: 20px auto;  animation: waveMove 1s infinite linear;}@keyframes waveMove {  from { background-position: 0 100%; }  to { background-position: -20px 100%; }}

三、效果图

欢迎关注微信公众号