html+css 实现文字滚动的按钮_业界新闻

发布时间:2024-08-03 04:18

阅读量:0

前言：哈喽，大家好，今天给大家分享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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>html+css 实现文字滚动的按钮</title>     <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container">     <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">         html+css 实现文字滚动的按钮</h1>      <div class="wrapper">         <button class="butdef btnMar">             <span>求点赞</span>             <div class="marquee" aria-hidden="true">                 <div class="marquee__inner">                     <span>求点赞</span>                     <span>求点赞</span>                     <span>求点赞</span>                     <span>求点赞</span>                 </div>             </div>         </button>         <button class="butdef btnMar">             <span>求关注</span>             <div class="marquee" aria-hidden="true">                 <div class="marquee__inner">                     <span>求关注</span>                     <span>求关注</span>                     <span>求关注</span>                     <span>求关注</span>                 </div>             </div>         </button>         <button class="butdef btnMar">             <span>求收藏</span>             <div class="marquee" aria-hidden="true">                 <div class="marquee__inner">                     <span>求收藏</span>                     <span>求收藏</span>                     <span>求收藏</span>                     <span>求收藏</span>                 </div>             </div>         </button>         <button class="butdef btnMar">             <span>求转发</span>             <div class="marquee" aria-hidden="true">                 <div class="marquee__inner">                     <span>求转发</span>                     <span>求转发</span>                     <span>求转发</span>                     <span>求转发</span>                 </div>             </div>         </button>     </div> </div>  </body> </html>

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; }