技术栈

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机制
相关推荐
Fly-ping
15 分钟前
【前端八股文面试题】【JavaScript篇3】DOM常⻅的操作有哪些?
前端
2301_81097039
19 分钟前
Wed前端第二次作业
前端·html
不浪brown
24 分钟前
全部开源!100+套大屏可视化模版速来领取!(含源码)
前端·数据可视化
iOS大前端海猫
26 分钟前
drawRect方法的理解
前端
姑苏洛言
41 分钟前
有趣的 npm 库 · json-server
前端
知否技术
1 小时前
Vue3项目中轻松开发自适应的可视化大屏!附源码!
前端·数据可视化
Hilaku
1 小时前
为什么我坚持用git命令行,而不是GUI工具?
前端·javascript·git
用户adminuser
1 小时前
深入理解 JavaScript 中的闭包及其实际应用
前端
heartmoonq
1 小时前
个人对于sign的理解
前端
ZzMemory
1 小时前
告别移动端适配烦恼!pxToViewport 凭什么取代 lib-flexible?
前端·css·面试
热门推荐
01全球最强模型Grok4,国内已可免费使用!(附教程)02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04[已解决]VSCode右键菜单消失恢复05🚀Cursor CLI+GPT-5保姆级教程+编程能力测评!Cursor CLI零成本免费使用GPT-5!Claude Code的劲敌来了!从安装到实战演示06GPT-5 使用限制与国内升级全攻略(免费 / Plus / Pro)【2025 最新】072025最新国内服务器可用docker源仓库地址大全(2025年8月更新)08Cursor 终端“卡死/无响应”问题的解法09KGG转MP3工具|非KGM文件|解密音频10OpenAI重返开源!GPT-OSS本地部署完全指南