技术栈

Vue中添加旋转动画

不吃香菜的猪2023-10-03 23:50

// transform: scale(1.2) rotate(-180deg); 放大 + 旋转

// transform: rotate(-180deg); 旋转

html 复制代码
    <i class="el-icon-close"></i>

    i {
      font-size: 20px;
      line-height: 24px;
      transition: transform 0.2s linear;
    }
    
    i:hover {
      color: red;
      transform-origin: center center;
      transform: scale(1.2) rotate(-180deg);
    }
上一篇:EasyX图形库note4,动画及键盘交互
下一篇:Linux 安全 - Capabilities机制
相关推荐
riuphan
10 分钟前
揭秘 JS 类型转换:ToPrimitive 机制的神秘面纱
前端·javascript
用户1544718439631
13 分钟前
从零实现一个vue2项目
vue.js
最爱睡觉睡觉睡觉
15 分钟前
Flutter ThemeData 主题系统
前端·app
最爱睡觉睡觉睡觉
16 分钟前
pub.dev 常用包 vs npm 生态对照
前端·app
先吃饱再说
16 分钟前
从三行代码理解前端的“三权分立”:HTML、CSS、JS 各司其职
前端
biubiubiu_LYQ
17 分钟前
入门开发者基础篇之CSS浮动布局:一文吃透浮动底层逻辑
前端·css
最爱睡觉睡觉睡觉
18 分钟前
React Hooks → Flutter 等价写法
前端·app
最爱睡觉睡觉睡觉
18 分钟前
CSS → Flutter 对照手册
android·前端
xiaofeichaichai
23 分钟前
Service Worker、PWA 与 Web Worker — 离线缓存与主线程算力分离
前端·缓存
JustHappy
40 分钟前
古法编程秘籍(四):函数究竟是什么?把函数最重要的能力一次讲清楚
前端·后端·面试
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf03Codex 下载安装指南:Windows 和 macOS 官方版下载04Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用,怎么排查和修复05【AI】2026 年具身智能模型和世界模型总结06【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法07CC-Switch 下载、安装与使用配置指南【2026.5.29】08CC-Switch & Claude 基于 Linux 服务器安装使用指南09裂开!ChatGPT 居然开始要手机号验证,附详细解决方法10Codex 接入 DeepSeek API 完整配置文档