怎么用CSS代码实现,好多图片横向的不间断滚动?

发布网友发布时间：2022-04-23 09:10

我来回答

共7个回答

懂视网时间：2022-04-06 14:47

本篇文章给大家带来的内容是关于如何使用CSS和D3实现小鱼游动的交互动画（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含的子元素分别代表鱼的身体、眼睛、背鳍和尾巴：

<div class="fish">
 <span class="body"></span>
 <span class="eye"></span>
 <span class="fin"></span>
 <span class="tail"></span>
</div>

设置页面样式为全屏且没有滚动条：

body {
 margin: 0;
 width: 100vw;
 height: 100vh;
 background-color: #222;
 overflow: hidden;
}

定义鱼的容器尺寸，--r 是一个基本尺寸单位，后续所有尺寸都是基于它计算的：

.fish {
 position: absolute;
 --r: 15vw;
 width: calc(var(--r) + var(--r) / 3);
 height: calc(var(--r) * 2);
 left: 50%;
 top: 100px;
}

画出鱼的身体，同时把鱼的颜色声明到父类中，因为下面还会用到这个颜色：

.fish {
 color: hsl(0, 50%, 50%);
}

.fish .body {
 position: absolute;
 border: var(--r) solid transparent;
 border-right-color: currentColor;
 border-left-style: none;
}

画出鱼的眼睛：

.fish .eye {
 position: absolute;
 --r1: calc(var(--r) / 4);
 width: var(--r1);
 height: var(--r1);
 background-color: #111;
 border-radius: 50%;
 top: 35%;
 left: 30%;
}

画出鱼的背鳍：

.fish .fin {
 position: absolute;
 --r2: calc(var(--r) / 2);
 border-bottom: var(--r2) solid;
 border-left: var(--r2) solid transparent;
 filter: brightness(2.5);
 left: calc(var(--r) - var(--r2));
}

画出鱼的尾巴：

.fish .tail {
 position: absolute;
 --r3: calc(var(--r) / 3);
 border: var(--r3) solid transparent;
 border-right-color: currentColor;
 border-left-style: none;
 right: 0;
 top: calc(var(--r) - var(--r3));
}

增加让鱼游动的动画效果，不是循环执行，而是只执行一次：

.fish {
 right: calc(var(--r) * -1);
 animation: run 3s linear forwards;
}

@keyframes run {
 to {
 right: 100%;
 }
}

再增加鱼游动时摇摆的动画效果：

.fish {
 animation: 
 run 3s linear forwards,
 shake 0.3s linear infinite;
}

@keyframes shake {
 50% {
 transform: rotateY(-30deg);
 }

 100% {
 transform: rotateY(30deg);
 }
}

接下来设置一些变量，以便创建不同样子的鱼：

鱼的大小的变量 --size，数值越大尺寸越大：

.fish {
 --size: 5;
 --r: calc(var(--size) * 1vw);
}

鱼的颜色变量 --color，表示色相环的角度：

.fish {
 --color: 0;
 color: hsl(var(--color), 50%, 50%);
}

鱼从右侧游到左侧的时长，时长越短游得越快：

.fish {
 --duration: 3;
 animation: 
 run calc(var(--duration) * 1s) linear forwards,
 shake 0.3s linear infinite;
}

鱼出现的高度，数据越大越靠近页面下部：

.fish {
 --top: 100;
 top: calc(var(--top) * 1px);
}

接下来用 d3 来批量处理 dom 元素和 css 变量。
引入 d3 库：

<script src="https://d3js.org/d3.v5.min.js"></script>

删除掉 html 中的 .fish 元素和 css 文件中的变量声明代码。创建一个函数，用于生成一条鱼。css 变量的值均为随机生成，--size 的取值范围是 5 ~ 8，--color 的取值范围是 -60 ~ 15，--duration 的取值范围是 3 ~ 6，--top 的取值范围是 100 ~ 300：

function buildFish() {
 let fish = d3.select('body')
 .append('p')
 .attr('class', 'fish')
 .style('--size', d3.randomUniform(5, 8)())
 .style('--color', d3.randomUniform(-60, 15)())
 .style('--duration', d3.randomUniform(3, 6)())
 .style('--top', d3.randomUniform(100, 300)());
 
 fish.append('span').attr('class', 'body');
 fish.append('span').attr('class', 'eye');
 fish.append('span').attr('class', 'fin');
 fish.append('span').attr('class', 'tail');
}

绑定鼠标单击事件，当按下鼠标时就生成一条鱼：

function buildFish(e) {
 //略....
 .style('--top', e.clientY);
}

window.addEventListener('click', buildFish);

并且让鱼的嘴部和点击的位置在一条水平线上：

.fish {
 top: calc(var(--top) * 1px - var(--r));
}

最后，在页面载入时自动生成 3 条鱼，以免页面载入后一片空白：

function buildFish(e) {
 //略....
 .style('--top', e ? e.clientY : d3.randomUniform(100, 300)());
}

d3.range(3).forEach(buildFish);

大功告成！

热心网友时间：2022-04-06 11:55

你好！CSS实现不了，配合JS才行
代码如下：
<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>

</script>

热心网友时间：2022-04-06 13:13

CSS实现不了，配合JS才行

<style type="text/css">

</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
<a href="#"><img src="1.jpg" alt="#" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>

</script>追问但是我head网页里面有一个java代码，在加一个java代码，要注意什么格式么

追答不用放在head里，就放在滚动代码旁边就好了，方便识别

注意var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2"); 看下var后面的变量有没有冲突的

热心网友时间：2022-04-06 14:48

1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。

2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。

3、在新建的<a></a>内，添加横向导航要显示的内容。

4、在<title></title>下方添加一个<style type="text/css"></style>。

5、源文件html保存后，使用浏览器打开预览效果。

热心网友时间：2022-04-06 16:39

热心网友时间：2022-04-06 18:47

<div class="gongbj">

<div class="xiaoy wow slideInUp">
<div class="dingd">{dede:type typeid='37'}<a href="[field:typeurl/]"><h2>[field:typename/]</h2></a>{/dede:type}</div>
<div class="dong">
<ul>
{dede:arclist row='10' typeid='37' titlelen='50' orderby='pubdate'}
<li><a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:title/]"></a><span>[field:title/]</span></li>
{/dede:arclist}

{dede:arclist row='10' typeid='12' titlelen='50' orderby='pubdate'}
<li><a href="[field:arcurl/]"><img src="[field:picname/]" alt="[field:title/]"></a><span>[field:title/]</span></li>
{/dede:arclist}
</ul>
</div>
</div>
</div>

下面是CSS代码：
.gongbj{ margin:0 auto; height:280px; background: url(../img/cgzs-bg.png) top center no-repeat;z-index:-10000; padding-top:20px; padding-bottom:30px;overflow: hidden;}
.xiaoy{ width:1200px; height:250px; margin:0 auto;

border-image: -webkit-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: -moz-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: -o-linear-gradient(135deg,#B13D37,#f80) 20 20;

border-image: linear-gradient(135deg,#B13D37,#fd0,#fff) 20 20;
z-index:1;overflow: hidden;
}
.dong {
width: 1200px;
height: 268px;
overflow: hidden;
z-index:-1;

}
.dong ul {
width: 200%;
height: 100%;
animation: picmove 10s linear infinite forwards;
z-index:-2;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-1190px);
}
}
.dong ul li{width: 250px;
height: 248px;
margin-right:15px;
/*border: 1px solid #ccf;*/
text-align:center;
float: left;}
.dong ul img {
padding:5px;

width: 240px;
height: 190px;
}
.dong ul span{color:#000; display:block; width:240px; height:20px; line-height:20px; text-align:center;}
.dong ul:hover {
animation-play-state: paused;
}
.dingd h2{font-size: 24px; color: #333333;}

热心网友时间：2022-04-06 21:12

百度无缝滚动就可以找到了！很多方法。。也有别人写好的框架或插件！

全部频道

怎么用CSS代码实现,好多图片横向的不间断滚动?

效果预览

源代码下载

代码解读