前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

文章目录

• 效果
• 原理解析
• • 1.给每一个按钮添加一个hover效果，并初始化一个==animation动画效果==。
  • 2.当按钮上有鼠标时，hover效果触发，触发文字移动效果。
  • 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
• 上代码，可以直接复制使用
• • 目录
  • html
  • css

效果

原理解析

1.给每一个按钮添加一个hover效果，并初始化一个animation动画效果。

animation: marquee 1s linear infinite; 

2.当按钮上有鼠标时，hover效果触发，触发文字移动效果。

/*当hover时的变化*/ .btnMar:hover .marquee__inner {   animation-play-state: running;   opacity: 1;   transition-duration: 0.4s; } .btnMar:hover>span {   opacity: 0; } 

3.具体的变换参数，直接看代码，可以一键复制，查看效果

上代码，可以直接复制使用

目录

html

                              
     
         html+css 实现文字滚动的按钮
      
                      求点赞             
                 
                     求点赞                     求点赞                     求点赞                     求点赞                 
             
                               求关注             
                 
                     求关注                     求关注                     求关注                     求关注                 
             
                               求收藏             
                 
                     求收藏                     求收藏                     求收藏                     求收藏                 
             
                               求转发             
                 
                     求转发                     求转发                     求转发                     求转发                 
             
              
 
    

css

* {   margin: 0;   padding: 0;   box-sizing: border-box; } :root {   --btn-bg-color:#fff;   --font-color-black: #000;   --btn-bg-color-hover: #FF5833; } .container{   min-height: 100vh;   background-color: #0e1538; } .wrapper{   display: flex;   flex-direction: column;   align-items: center;   gap:40px; } .butdef {   pointer-events: auto;   cursor: pointer;   background: var(--btn-bg-color);   border: none;   padding: 15px 30px;   margin: 0;   font-family: inherit;   font-size: inherit;   position: relative;   display: inline-block; }  .butdef::before, .butdef::after {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%; }  .btnMar {   font-family: "微软雅黑", sans-serif;   font-weight: 500; }  .btnMar>span {   display: inline-block; }  .marquee {   position: absolute;   top: 0;   left: 0;   width: 100%;   overflow: hidden;   pointer-events: none; }  .marquee__inner {   width: fit-content;   display: flex;   position: relative;   --offset: 1rem;   --move-initial: calc(-25% + var(--offset));   --move-final: calc(-50% + var(--offset));   transform: translate3d(var(--move-initial), 0, 0);   animation: marquee 1s linear infinite;   animation-play-state: paused;   opacity: 0; }  .marquee span {   text-align: center;   white-space: nowrap;   font-style: italic;   padding: 15px 5px; }  @keyframes marquee {   0% {     transform: translate3d(var(--move-initial), 0, 0);   }    100% {     transform: translate3d(var(--move-final), 0, 0);   } }  /*当hover时的变化*/ .btnMar:hover .marquee__inner {   animation-play-state: running;   opacity: 1;   transition-duration: 0.4s; } .btnMar:hover>span {   opacity: 0; }  

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作