用线悬停挥动

Posted 2023-03-06

【中文标题】用线悬停挥动

【英文标题】：Hover with line to wave

【发布时间】：2020-01-13 07:19:20

【问题描述】：

我正在尝试创建此悬停：

这就是我所做的。有没有没有图片的方法？也可以将直线从直线动画到波浪线吗？

    body 
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
    
    
    a 
      border-bottom: 1px solid #453886;
      color: #453886;
      padding-bottom: .25em;
      text-decoration: none;
    
    
    a:hover 
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
      background-position: bottom;
      background-repeat: repeat-x;
      background-size: 20%;
      border-bottom: 0;
      padding-bottom: .3em;
      text-decoration: none;
    

      <a href="#">Lorem Ipsum</a>

【问题讨论】：

你会检查照片吗？ , 因为它不会打开。

我认为有 JS 和 SVG 文件的选项，但您需要检查如何操作。如果你用谷歌搜索类似animating with js and svg 的东西应该会给你答案。

伪和边界半径可以部分模拟这一点：codepen.io/gc-nomade/pen/mdbLRoe

【参考方案1】：

CSS 有 text-decoration-style 属性。 在这里查看：https://css-tricks.com/forums/topic/wavy-unerline/

body 
      align-items: center;
      display: flex;
      height: 100vh;
      justify-content: center;
    
    
    a 
      color: #453886;
      padding-bottom: .25em;
      text-decoration:underline ;
    
    
    a:hover 
      text-decoration:underline wavy;
      
    

<a href="#">Lorem Ipsum</a>