標籤：form case log opacity style idt dex class pad
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>互動中心圖示的改變</title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; margin: 100px auto; transform-origin:50% 50%; } span { display: inline-block; width: 100%; height: 1px; border-bottom: 1px solid lightgray; transition: all .6s; transform-origin:50% 50%; } .test1 { transform: rotate(45deg) translateY(25px); } .test2 { transform: rotate(-45deg) translateY(-25px); } .test3 { opacity: 0; } </style></head><body><div> <span></span> <span></span> <span></span></div></body><script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script><script> $(() => { $("div").on("click", (e) => { $(e.target).find("span").map((index, item) => { switch (index) { case 0: $(item).toggleClass("test1"); break; case 1: $(item).toggleClass("test3"); break; case 2: $(item).toggleClass("test2"); break; } }) }) })</script></html>
css+jq寫的小小的移動端按鈕的動畫改變（三個很閑變成一個叉號）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
