gpt4 book ai didi

javascript - 在容器内显示的 CSS 幻灯片。如何?

转载 作者:可可西里 更新时间:2023-11-01 13:50:09 26 4
gpt4 key购买 nike

目标:

在此框架中放映幻灯片。

这是它的一个 jsfiddle:

https://jsfiddle.net/kf3cqk6y/2/

$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
@keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
@for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}
<body>

<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

</div>

</body>

问题:

  • 如何在容器中显示图像?

最佳答案

您需要将 fiddle 样式设置为 scss 而不是 css

Here's an updated fiddle

如果您想将其包含在您的网页中,use the code from this fiddle

关于javascript - 在容器内显示的 CSS 幻灯片。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35954224/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com