首页 > 其他分享 >css 动画之无缝跑马灯

css 动画之无缝跑马灯

时间:2024-04-18 11:35:09浏览次数:29  
标签:flex 12px img 动画 100% 跑马灯 0px css target

<div class="target-top" style="overflow: hidden">
  <div class="target-img">
    <div v-for="item in targetFors" :key="item.id">
            ...//内容不重要
    </div>
  </div>

  <div class="target-img img-right">
    <div v-for="item in targetFors" :key="item.id">
            ...//内容不重要
    </div>
  </div>
</div>
.target-top {
  position: relative;
  overflow: hidden;
  display: inline-flex;
}

.img-right {
  position: relative;
  left: 10px; // 这里的间距可以根据你想要的宽度自行调整
}

.target-img {
  width: 100%;
  height: 400px;
  // display: flex;
  display: inline-flex;
  justify-content: space-between;
  animation: marquee 30s linear infinite;
  //这里做了一个鼠标移入盒子放大的效果
  > div:hover {
    transition: all 0.6s;
    transform: scale(1.1);
  }
  > div {
    width: 527px;
    height: 310px;
    /*background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    margin-right: 100px;
    margin-top: 40px;*/  //无关的属性
    flex-shrink: 0;// 禁止缩放盒子
  }
}
//定义动画效果开始的位置以及消失的位置
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

//实现鼠标移入放大的效果
.target-top:hover .target-img {
  animation-play-state: paused;
}

 

代码照抄上去就能实现效果

 

标签:flex,12px,img,动画,100%,跑马灯,0px,css,target
From: https://www.cnblogs.com/majiayin/p/18143121

相关文章

  • Python Flask+Pandas读取excel显示到html网页: CSS控制表格样式、表头文字居中
    前言全局说明CSS控制表格样式一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563Pandas安装https://www.cnblogs.com/wutou/p/17811839.htmlPandas官方API说明https://pand......
  • CSS 滚动驱动动画终于正式支持了
    在最新的Chrome115中,令人无比期待的CSS滚动驱动动画(CSSscroll-drivenanimations)终于正式支持了\~有了它,几乎以前任何需要JS监听滚动的交互都可以纯CSS实现了,就是这么强大,一起了解一下吧温馨提示:文章略长,建议收藏后反复查阅一、快速入门CSS滚动驱动动画直接介绍 API......
  • css入门
    目录CSS入门css简介导入方式选择器属性盒子模型浮动定位CSS入门css简介ps:学习此内容前,建议先过一边HTML入门,本文档的使用方法和HTML入门是一样的,就不过多赘述了CSS(CascadingStyleSheets)是一种用于定义网页样式和布局的样式表语言。(中文名是层叠样式表)HTML负责定义......
  • HarmonyOS-基础之动画
    1、是什么?动画可以在UI界面发生变化时,提供渐变过渡效果,提升用户体验。动画的实现原理是通过在一段时间内连续播放一系列静止画面(帧),从而产生流畅的视觉效果。ArkUI提供了多种动画接口,例如:显式动画、属性动画、转场动画等,来实现各种动画效果。2、显示动画animateTo()是ArkUI......
  • CSS重置(CSS Reset)
    `/*EricMeyer'sResetCSSv2.0(http://cssreset.com)*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,st......
  • 谈谈CSS浮动
    浮动,主要用于图片,使其不占文档位置,可以围绕在文字周围。浮动如果设置在块级元素内,整个块内的元素在同一行;浮动如果设置在行内元素,可以设置行内元素的宽高。由于浮动在文档中不占位置,因此如果父级盒子没设置高度,设置浮动的子元素设置了高度的话,那么父盒子会被撑开,这样对父盒子以下......
  • vue3中使用scss
    安装依赖npminstallsasssass-loader--save-dev局部使用<stylescopedlang="scss">...定义样式</style> 全局共享样式变量,在assets/style文件夹中定义mixin.scss文件,并设置一些样式;在其他文件使用定义的变量前需要引入样式文件表  在vite.config.ts文件中......
  • XPath和CSS选择器的进阶
    记录一下关于selenium下xpath的进阶技术XPath轴(axes)和CSS选择器的伪类(pseudo-classes)与伪元素(pseudo-elements)是高级定位技术,可以在复杂的HTML结构中帮助你更精确地定位元素。1.XPath轴(Axes)XPath轴提供了一种方式来选择与当前节点有特定关系的节点。以下是一些常用的XPath轴:......
  • Python Flask+Pandas读取excel显示到html网页: CSS控制表格样式
    前言全局说明CSS控制表格样式一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563修改内容后,要重启flask服务,修改才能生效四、CSS控制表格样式4.1.2文件名:index.pyfrom......
  • 在CSS中创建一个鼠标悬停时弹出菜单
    要在CSS中创建一个鼠标悬停时弹出菜单,你可以使用HTML和CSS来实现。以下是一个简单的例子:HTML:<divclass="dropdown"><buttonclass="dropbtn">点击我</button><divclass="dropdown-content"><ahref="#">链接1</a>......