如何做到中间小两端小的旋转木马效果

时间：2023-03-31 01:39:57 CSS

是国际惯例，效果先好，话不多说，下饭了。css:html:

aaa

vvvv

div>js:$(function(){$('.box>li:nth(1)').css({width:'36%',margin:'02%'})$('.box>li:nth(1)').append('

InstallSpeech

')})$(window).resize(function(){//创建默认值$('.box').css('height','auto')})functionmoveLeft(){varheight=$('.box>li:nth(1)').height()$('.box').css('height',height)$('.box>li').css({width:'20%',margin:'00%'})$('.box>li:nth(2)').css({width:'36%',margin:'02%'})$('.box').animate({left:'-25%'},400,function(){//将第一个子元素移动到末尾，并设置left=0$(".box").append($('.box>li:nth(0)')[0]);$(".dd-2").append($('.aa')[0]);$(".aa").append('ccc');$('.box').css('左',0);$(".btn").attr("已禁用",false);$('.box>li:nth(1)').append('

/span>
视频主题

')});}functionmoveRight(){$('.box>li').css({width:'20%',margin:'00%'})$('.box>li:nth(0)').css({width:'36%',margin:'02%'})varheight=$('.box>li:nth(1)').height()$('.box').css('height',height)$(".box").prepend($('.box>li:nth(3)')[0]);$('.box').css('左','-20%');$('.box').animate({left:0},400,function(){$(".btn").attr("disabled",false);$('.box>li:nth(1)').append('

视频主题

')});}

上一篇：CSS实现网格效果

下一篇：CSS补充

如何做到中间小两端小的旋转木马效果相关文章