text 缩放滑块
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 缩放滑块相关的知识,希望对你有一定的参考价值。
//HTML
<div class="slider">
<img src="https://source.unsplash.com/random" alt="" />
<img src="https://source.unsplash.com/category/nature" alt="" />
<img src="https://source.unsplash.com/category/food" alt="" />
<img src="https://source.unsplash.com/category/people" alt="" />
</div>
//CSS
.slider img {
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
animation: zoom 36s linear infinite 0s;
}
.slider img:nth-child(2) {
z-index: 99;
animation-delay: 9s;
}
.slider img:nth-child(3) {
z-index: 98;
animation-delay: 18s;
}
.slider img:nth-child(4) {
z-index: 97;
animation-delay: 27s;
}
@keyframes zoom {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
animation-timing-function: ease-out;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
以上是关于text 缩放滑块的主要内容,如果未能解决你的问题,请参考以下文章
实现缩放滑块 QGraphicsView
连接滑块以控制 qml 相机的缩放
带有 x 范围滑块的 Y 轴自动缩放
如何使用滑块更改 mapkit 地图视图缩放级别?
php 为woocommerce添加滑块和图像缩放支持
将本机 iphone 相机缩放滑块和 youtube 播放器控制器添加到我的应用程序