温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用CSS实现图片走马灯动态效果

发布时间:2021-12-30 11:05:02 来源:亿速云 阅读:187 作者:小新 栏目:web开发

小编给大家分享一下如何使用CSS实现图片走马灯动态效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

由于项目需要实现一个图片的走马灯效果。查看了大部份通用vue的组件库,比较少看到这类组件,就自己手动实现基于css3动画的走马灯效果。马上想到两个方案,一个是通过定时器、scrollLeft或者修改定位position中的left属性值,另外个方案是通过css3的transform和animation。

选择用动画实现,由于js实现的动画运行在CPU,css3的动画运行在GPU,css3渲染成本低,最后决定用css3去实现这类操作。

使用scrollLeft

一开始使用scrollLeft+overflow实现效果,用到了定时器去触发,然后每次都会导致重绘和回流。(ps:如果需要更好提高性能,可以使用requestAnimationFrame去代替定时器触发,主要优点是requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧)

(更改scrollLeft与left效果一样)核心代码:

function toScrollLeft(){
  //  如果容器的宽度大于滚动条距离,则重复滚动
  if(divWidth > box.scrollLeft){
    box.scrollLeft++
    setTimeout('toScrollLeft()', 18);
  }
  else{
    // 滚动结束,从新开始
    box.scrollLeft=0;
    setTimeout('toScrollLeft()', 18);
  }
}

使用 css3 animation transform

使用css3动画实现走马灯,用css变量来动态设置每个状态transform的translateX偏移量,以及最关键的animation,实现部分效果如下制作的gif。

如何使用CSS实现图片走马灯动态效果

1. 初步设置html布局,设置一个div容器

<div class="box" >
    <ul >
        <li v-for="(src,i) in cap " :key="i">
            <img width="90px" height="90px" :src="src" />
        </li>
    </ul>
</div>

2. 设置对应的样式

.box{
display: flex;
overflow: hidden;
flex-direction: column;
border-radius:12px;
width: 100%;
height: 100%;
background-color:#fff;
}
ul{
display: flex;
}

3. 最后设置绑定对象到style上,在.box元素的style上主要是使用了css 变量,然后通过具体值去动态设置动画每个状态的效果。关键代码使用了animation:cap.length*8+ 's move infinite linear; 就会出现无限重复移动的效果。

ps:整体主要操作点就是这样,其他细节的就省略了

<div class="box" :style="{
'--card-ul-width-start':-30+'px',
'--card-ul-width-middle1':-cap.length*30+'px', 
'--card-ul-width-middle2':-cap.length*60+'px',
'--card-ul-width-end':-cap.length*90+'px'
}">
    <ul :style="{'-webkit-animation':cap.length*8+ 's move infinite linear;'}">
        <li></li>
    </ul>
</div>
data(){
    cap:new Array(6).fill('https://res.minigame.vip/gc-assets/fruit-master/fruit-master_icon.png')
}
@keyframes move {
    0%{
    transform:translateX(var(--card-ul-width-start))
    }
    30%{
    transform:translateX(var(--card-ul-width-middle1))
    }
    70%{
    transform:translateX(var(--card-ul-width-middle2))
    }
    100%{
    transform:translateX(var(--card-ul-width-end))
    }    
}

看完了这篇文章,相信你对“如何使用CSS实现图片走马灯动态效果”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI