当前位置:首页 » 《随便一记》 » 正文

纯css实现 横向跑马灯(无缝滚动轮播,移入悬停)

12 人参与  2024年11月01日 12:40  分类 : 《随便一记》  评论

点击全文阅读


效果
在这里插入图片描述

// App.js

import React from 'react'import styles from './index.m.less'export default function App() {  return (    <div className={styles.container} style={{ display: 'flex' }}>      {[1, 2, 3].map((k) => (        <div key={k} className={styles.content} style={{ display: 'flex', margin: '50px 0' }}>          {Array.from({ length: 12 }, (_, idx) => idx).map((i) => {            return (              <a                key={i}                href='https://www.baidu.com/'                style={{                  margin: '0 20px',                  padding: '20px 0',                  width: '220px',                  height: '100px',                  textAlign: 'center',                  border: '1px solid #f00'                }}              >                <div style={{ fontSize: '80px' }}>{i + 1}</div>              </a>            )          })}        </div>      ))}    </div>  )}

// index.m.less

.content {  animation: marquee-left 20s linear infinite !important;}// 层级必须要这样写.container{  &:hover{    .content{      // 暂停动画      animation-play-state: paused !important;    }  }}@keyframes marquee-left {  0% {    transform: translate(0);  }  100% {    transform: translate(-100%);  }}

点击全文阅读


本文链接:http://zhangshiyu.com/post/180927.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1