css 列表划过缩放动画

javascript 复制代码
<template>
  <div>
    <div class="item" v-for="(item,index) in list" :key="index">
      <img src="../../../../aa.png" alt="">
      <div class="num">{{(index+1) < 10 ? '0'+(index+1) : index+1 }}</div>
      <div class="title">{{item}}</div>
      <div class="go"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        '抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头',
        '抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头',
        '抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头',
        '抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头',
        '抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头,抽烟喝酒烫头'
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 70, 139, 0.04);
  border-radius: 4px;
  transition: all 0.5s;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  position: relative;
  img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
  }
  .num {
    margin: 0 20px;
  }
  .go {
    position: absolute;
    right: 20px;
    top: 50%;
    background: url('../../static/images/icon1.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: 36px;
    height: 36px;
    transform: translate(0, -50%);
  }
  cursor: pointer;
  &:hover {
    transform: scale(1.02);
    box-shadow: 0px 2px 8px 4px rgba(0, 70, 139, 0.04);
    color: #004ca1;
    .go {
      background: url('../../static/images/icon1-hover.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      width: 36px;
      height: 36px;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translate(0, -50%);
    }
  }
}
</style>
相关推荐
Mintopia6 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼24 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~27 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务29 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛29 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑33 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭39 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿43 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter