文章预览
鼠标悬停时的波浪线效果 在鼠标悬停在链接上时创建波浪线效果。 使用 linear-gradient 为链接创建重复背景。 为链接创建一个 :hover 状态,其 background-image 为一个包含带有波浪路径和动画的 SVG 的 data URL。 < p > The < a class = "squiggle" href = "#" > magnificent octopus a > swam along gracefully. p > a .squiggle { background : linear-gradient (to bottom, # 0087 ca 0% , # 0087 ca 100% ); background-position : 0 100% ; background-repeat : repeat-x; background-size : 2px 2px ; color : inherit; text-decoration : none; } a .squiggle :hover { background-image : url ( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fi
………………………………
