html 跨度内部div悬停效果字母间距效果

fslejnso  于 2023-11-15  发布在  其他
关注(0)|答案(1)|浏览(137)

下面是一个div中的span代码：

  1. <div class="mission-button"><span class="mission">view our mission</span></div>

字符串
下面是CSS：

  1. .mission-button::before {
  2.     content:'';
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     width: 100%;
  7.     height: 100%;
  8.     transition: all 1s;
  9.     border-left-width: 2px;
  10.     border-right-width: 2px;
  11.     border-left-style: solid;
  12.     border-right-style: solid;
  13.     background-color: transparent;
  14.     border-color: var(--main-dark); 
  15.     animation: borderOnLoad 2s forwards;
  16. }
  18. @keyframes changeColor {
  19.     0% {
  20.         letter-spacing: 0px;
  21.         color: white;
  22.     }
  23.     100% {
  24.         letter-spacing: 2px;
  25.         color: var(--main-dark);
  26.     }
  27. }
  29. @keyframes borderOnLoad {
  30.     0% {
  31.         width: 100%;
  32.         border-left-width: 3px;
  33.         border-right-width: 3px;
  34.         height: 100%;   
  35.         top: 0;
  36.         color: white;
  37.         background-color: var(--main-dark);
  38.     }
  39.     50% {
  40.         width: 200%;    
  41.         left: -150px;
  42.         border-left-width: 3px; 
  43.         border-right-width: 3px;    
  44.         height: 100%;   
  45.         top: 0;
  46.         color: white;
  47.     } 
  48.     100% {
  49.         width: 65%;
  50.         left: -150px;
  51.         border-left-width: 200px;
  52.         border-right-width: 200px;  
  53.         height: 1px;
  54.         top: 30px;
  55.         color: var(--main-dark);    
  56.         background-color: transparent;
  57.     }
  58. }
  60. .mission-button {
  61.     padding: 20px;
  62.     /* background-color: #083958;*/
  63.     cursor: pointer;
  64.     width: 50%;
  65.     position: relative;
  66.     margin-top: 20px;   
  67.     font-size: 20px;
  68.     text-align: center;
  69. }
  71. .mission {
  72.     letter-spacing: 0px;    
  73.     -webkit-transition: all 1s ease;    
  74.     -moz-transition: all 1s ease;
  75.     -o-transition: all 1s ease;
  76.     transition: all 1s ease;
  77.     cursor: pointer;
  78.     animation: changeColor 2s forwards;
  79. }   
  81. .mission-button:hover .mission {
  82.     letter-spacing: 5px;    
  83. }
  85. .mission-button:hover::before {
  86.     width: 32%;
  87.     border-left-width: 200px;
  88.     border-right-width: 200px;  
  89.     height: 1px;
  90.     top: 30px;
  91. }

型
changeColor和borderOnLoad动画按预期工作，但当我悬停div时，我希望span通过以下方式更改其字母间距：

  1. .mission {
  2.     letter-spacing: 0px;    
  3.     -webkit-transition: all 1s ease;    
  4.     -moz-transition: all 1s ease;
  5.     -o-transition: all 1s ease;
  6.     transition: all 1s ease;
  7.     cursor: pointer;
  8.     animation: changeColor 2s forwards;
  9. }   
  11. .mission-button:hover .mission {
  12.     letter-spacing: 5px;    
  13. }

型
但它做任何事情。我想这是因为已经有一个动画的任务按钮，这是优先于其余的，但我不知道

Html

1条答案

按热度按时间
ncecgwcz

ncecgwcz1#

这是因为您将animation-fill-mode设置为forwards，这将保持最后一个关键帧的样式，包括line-spacing:2px。将最后一个关键帧的原始2px行距移动到.mission可能更有意义：

  1. @keyframes changeColor {
  2.     0% {
  3.         letter-spacing: 0px;
  4.         color: white;
  5.     }
  6.     100% {
  7.         color: black;
  8.     }
  9. }
  11. .mission {
  12.     letter-spacing: 2px;    
  13.     -webkit-transition: all 1s ease;    
  14.     -moz-transition: all 1s ease;
  15.     -o-transition: all 1s ease;
  16.     transition: all 1s ease;
  17.     cursor: pointer;
  18.     animation: changeColor 2s forwards;
  19. }   
  21. .mission-button:hover .mission{
  22.     letter-spacing: 5px;    
  23. }

字符串

  1. .mission-button::before {
  2.     content:'';
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     width: 100%;
  7.     height: 100%;
  8.     transition: all 1s;
  9.     border-left-width: 2px;
  10.     border-right-width: 2px;
  11.     border-left-style: solid;
  12.     border-right-style: solid;
  13.     background-color: transparent;
  14.     border-color: black; 
  15.     animation: borderOnLoad 2s forwards;
  16. }
  18. @keyframes changeColor {
  19.     0% {
  20.         letter-spacing: 0px;
  21.         color: white;
  22.     }
  23.     100% {
  24.         color: black;
  25.     }
  26. }
  28. @keyframes borderOnLoad {
  29.     0% {
  30.         width: 100%;
  31.         border-left-width: 3px;
  32.         border-right-width: 3px;
  33.         height: 100%;   
  34.         top: 0;
  35.         color: white;
  36.         background-color: black;
  37.     }
  38.     50% {
  39.         width: 200%;    
  40.         left: -150px;
  41.         border-left-width: 3px; 
  42.         border-right-width: 3px;    
  43.         height: 100%;   
  44.         top: 0;
  45.         color: white;
  46.     } 
  47.     100% {
  48.         width: 65%;
  49.         left: -150px;
  50.         border-left-width: 200px;
  51.         border-right-width: 200px;  
  52.         height: 1px;
  53.         top: 30px;
  54.         color: black;    
  55.         background-color: transparent;
  56.     }
  57. }
  59. .mission-button {
  60.     padding: 20px;
  61.     /* background-color: #083958;*/
  62.     cursor: pointer;
  63.     width: 50%;
  64.     position: relative;
  65.     margin-top: 20px;   
  66.     font-size: 20px;
  67.     text-align: center;
  68. }
  70. .mission {
  71.     letter-spacing: 2px;    
  72.     -webkit-transition: all 1s ease;    
  73.     -moz-transition: all 1s ease;
  74.     -o-transition: all 1s ease;
  75.     transition: all 1s ease;
  76.     cursor: pointer;
  77.     animation: changeColor 2s forwards;
  78. }   
  80. .mission-button:hover .mission{
  81.     letter-spacing: 5px;    
  82. }
  84. .mission-button:hover::before {
  85.     width: 32%;
  86.     border-left-width: 200px;
  87.     border-right-width: 200px;  
  88.     height: 1px;
  89.     top: 30px;
  90. }
  1. <div class="mission-button"><span class="mission">view our mission</span></div>

如果无法更改原始间距，则可以使用!important来覆盖它：

  1. .mission-button:hover .mission{
  2.     letter-spacing: 5px !important;    
  3. }

型

  1. .mission-button::before {
  2.   content: '';
  3.   position: absolute;
  4.   top: 0;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   transition: all 1s;
  9.   border-left-width: 2px;
  10.   border-right-width: 2px;
  11.   border-left-style: solid;
  12.   border-right-style: solid;
  13.   background-color: transparent;
  14.   border-color: black;
  15.   animation: borderOnLoad 2s forwards;
  16. }
  18. @keyframes changeColor {
  19.   0% {
  20.     letter-spacing: 0px;
  21.     color: white;
  22.   }
  23.   100% {
  24.     letter-spacing: 2px;
  25.     color: black;
  26.   }
  27. }
  29. @keyframes borderOnLoad {
  30.   0% {
  31.     width: 100%;
  32.     border-left-width: 3px;
  33.     border-right-width: 3px;
  34.     height: 100%;
  35.     top: 0;
  36.     color: white;
  37.     background-color: black;
  38.   }
  39.   50% {
  40.     width: 200%;
  41.     left: -150px;
  42.     border-left-width: 3px;
  43.     border-right-width: 3px;
  44.     height: 100%;
  45.     top: 0;
  46.     color: white;
  47.   }
  48.   100% {
  49.     width: 65%;
  50.     left: -150px;
  51.     border-left-width: 200px;
  52.     border-right-width: 200px;
  53.     height: 1px;
  54.     top: 30px;
  55.     color: black;
  56.     background-color: transparent;
  57.   }
  58. }
  60. .mission-button {
  61.   padding: 20px;
  62.   /* background-color: #083958;*/
  63.   cursor: pointer;
  64.   width: 50%;
  65.   position: relative;
  66.   margin-top: 20px;
  67.   font-size: 20px;
  68.   text-align: center;
  69. }
  71. .mission {
  72.   letter-spacing: 0px;
  73.   -webkit-transition: all 1s ease;
  74.   -moz-transition: all 1s ease;
  75.   -o-transition: all 1s ease;
  76.   transition: all 1s ease;
  77.   cursor: pointer;
  78.   animation: changeColor 2s forwards;
  79. }
  81. .mission-button:hover .mission {
  82.   letter-spacing: 5px !important;
  83. }
  85. .mission-button:hover::before {
  86.   width: 32%;
  87.   border-left-width: 200px;
  88.   border-right-width: 200px;
  89.   height: 1px;
  90.   top: 30px;
  91. }
  1. <div class="mission-button"><span class="mission">view our mission</span></div>

或者将文本 Package 在另一个容器中，并在该容器上指定样式：

  1. .mission-button:hover .text-spacing{
  2.     letter-spacing: 5px;    
  3. }
  5. <div class="mission-button">
  6.     <span class="mission">
  7.         <div class="text-spacing">view our mission</div>
  8.     </span>
  9. </div>

型

  1. .mission-button::before {
  2.     content:'';
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     width: 100%;
  7.     height: 100%;
  8.     transition: all 1s;
  9.     border-left-width: 2px;
  10.     border-right-width: 2px;
  11.     border-left-style: solid;
  12.     border-right-style: solid;
  13.     background-color: transparent;
  14.     border-color: black; 
  15.     animation: borderOnLoad 2s forwards;
  16. }
  18. @keyframes changeColor {
  19.     0% {
  20.         letter-spacing: 0px;
  21.         color: white;
  22.     }
  23.     100% {
  24.         letter-spacing: 2px;
  25.         color: black;
  26.     }
  27. }
  29. @keyframes borderOnLoad {
  30.     0% {
  31.         width: 100%;
  32.         border-left-width: 3px;
  33.         border-right-width: 3px;
  34.         height: 100%;   
  35.         top: 0;
  36.         color: white;
  37.         background-color: black;
  38.     }
  39.     50% {
  40.         width: 200%;    
  41.         left: -150px;
  42.         border-left-width: 3px; 
  43.         border-right-width: 3px;    
  44.         height: 100%;   
  45.         top: 0;
  46.         color: white;
  47.     } 
  48.     100% {
  49.         width: 65%;
  50.         left: -150px;
  51.         border-left-width: 200px;
  52.         border-right-width: 200px;  
  53.         height: 1px;
  54.         top: 30px;
  55.         color: black;    
  56.         background-color: transparent;
  57.     }
  58. }
  60. .mission-button {
  61.     padding: 20px;
  62.     /* background-color: #083958;*/
  63.     cursor: pointer;
  64.     width: 50%;
  65.     position: relative;
  66.     margin-top: 20px;   
  67.     font-size: 20px;
  68.     text-align: center;
  69. }
  71. .mission {
  72.     letter-spacing: 0px;    
  73.     -webkit-transition: all 1s ease;    
  74.     -moz-transition: all 1s ease;
  75.     -o-transition: all 1s ease;
  76.     transition: all 1s ease;
  77.     cursor: pointer;
  78.     animation: changeColor 2s forwards;
  79. }   
  81. .mission-button:hover .text-spacing{
  82.     letter-spacing: 5px;    
  83. }
  85. .mission-button:hover::before {
  86.     width: 32%;
  87.     border-left-width: 200px;
  88.     border-right-width: 200px;  
  89.     height: 1px;
  90.     top: 30px;
  91. }
  1. <div class="mission-button">
  2.     <span class="mission">
  3.         <div class="text-spacing">view our mission</div>
  4.     </span>
  5. </div>
展开查看全部
赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com