您正在使用 IPV4 [34.204.198.73] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 025
2025年 高 考 326
2025年 元 旦 169
2025年 春 节 197
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS3 实现文本与图片横向无限滚动动画效果
内容摘要: html结构!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'titleInfiniteScrollingAnimation/title/headbodydivclass='scrol......
html结构

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>InfiniteScrollingAnimation</title>

</head>

<body>

<divclass="scroll"style="--t:20s">

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

</div>

<divclass="scroll"style="--t:30s">

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

</div>

<divclass="scroll"style="--t:10s">

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

</div>

<divclass="scroll"style="--t:35s">

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

<div>

<span>HTML</span>

<span>CSS</span>

<span>JavaScript</span>

<span>Vue</span>

<span>React</span>

<span>Figma</span>

<span>Photoshop</span>

</div>

</div>

<divclass="scrollimg-box"style="--t:25s">

<div>

<divclass="bg"style="--r:0;">1</div>

<divclass="bg"style="--r:40;">2</div>

<divclass="bg"style="--r:80;">3</div>

<divclass="bg"style="--r:120;">4</div>

<divclass="bg"style="--r:160;">5</div>

<divclass="bg"style="--r:200;">6</div>

<divclass="bg"style="--r:240;">7</div>

<divclass="bg"style="--r:280;">8</div>

<divclass="bg"style="--r:320;">9</div>

</div>

<div>

<divclass="bg"style="--r:0;">1-1</div>

<divclass="bg"style="--r:40;">2-1</div>

<divclass="bg"style="--r:80;">3-1</div>

<divclass="bg"style="--r:120;">4-1</div>

<divclass="bg"style="--r:160;">5-1</div>

<divclass="bg"style="--r:200;">6-1</div>

<divclass="bg"style="--r:240;">7-1</div>

<divclass="bg"style="--r:280;">8-1</div>

<divclass="bg"style="--r:320;">9-1</div>

</div>

</div>

</body>

</html>

css代码

@importurl('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap');

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}

body{

min-height:100vh;

background-color:#222;

color:#fff;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.scroll{

position:relative;

display:flex;

width:700px;

overflow:hidden;

mask-image:linear-gradient(90deg,transparent,#fff20%,#fff80%,transparent);

-webkit-mask-image:linear-gradient(90deg,transparent,#fff20%,#fff80%,transparent);

}

.scroll>divspan{

display:inline-block;

margin:10px;

padding:5px10px;

background-color:#333;

border-radius:5px;

letter-spacing:0.2em;

text-transform:uppercase;

cursor:pointer;

transition:background-color0.5s;

}

.scroll>divspan:hover{

background-color:#4caf50;

}

.img-box{

display:flex;

column-gap:10px;

}

.img-box>div,

.img-box>div.bg{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

}

.img-box.bg{

width:150px;

height:150px;

background-color:#ff3e3e;

filter:hue-rotate(calc(var(--r)*1deg));

cursor:pointer;

transition:filter0.5s;

}

.scroll>div{

white-space:nowrap;

animation:animatevar(--t)linearinfinite;

animation-delay:calc(var(--t)*-1);

}

@keyframesanimate{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

.scroll>div:nth-child(2){

animation:animate2var(--t)linearinfinite;

animation-delay:calc(var(--t)/-2);

}

@keyframesanimate2{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-200%);

}

}

.scroll:hover>div{

animation-play-state:paused;

}

@mediascreenand(max-width:768px){

.scroll{

width:95vw;

}

.scroll>divspan{

background-color:#4caf50;

}

.img-box.bg{

width:15vw;

height:15vw;

}

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:window.open()各参数示例详解

 

下一篇:没有了

发布日期:2024/6/18
手机扫二维码直达本页
发布时间:20:34:33
点  击:8
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,速盾网络提供加速防护
运行时间载入中.....