CSS:碰觸後寬度緩慢增加
2013/01/01
萌芽站長
339 0
網站技術 , CSS
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
這是基本的CSS寫法~歡迎參考!
↓範例(游標移到上面試試)
測試
~完整語法~
一、CSS部分
<style>
.mnya027 {
font:12px Tahoma,'Microsoft Yahei','mingliu';
background:rgba(102, 255, 255, 0.6);
padding: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
height:30px;
width:50px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.mnya027:hover {
width:200px;
}
</style>
二、HTML部分
<div class="mnya027">測試</div>
贊助廣告 ‧ Sponsor advertisements
jQuery CDN 掛點解決方案?簡單的 JavaScript 讓您有本地替代方案!
📆 2019-08-17
📁
網站技術, HTML, JavaScript, jQuery
PHP:運用 foreach 輸出一維及二維陣列所有的索引及其值
📆 2022-02-10
📁
網站技術, PHP
VS Code x GitHub Copilot:加入 Gemini 2.5 Pro 模型,感受 AI 建專案的魅力!
📆 2025-04-10
📁
軟體應用, 網站技術, 人工智慧
HTML:<title>
📆 2014-01-04
📁
網站技術, HTML
Highlight Matching Tag(Visual Studio Code 擴充功能):HTML 開始與結束標籤強調與標示
📆 2020-03-02
📁
軟體應用, 網站技術, HTML
Animate.css:快速製作CSS動畫
📆 2016-02-25
📁
網站技術, CSS
Visual Studio Code:開放原始碼的程式碼編輯器、中文化支援、可個人化
📆 2019-02-11
📁
軟體介紹, 網站技術, 程式設計
Node.js:jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇)
📆 2019-09-30
📁
多媒體, 網站技術, JavaScript, Node.js, 靜圖處理, Gulp
留言區 / Comments
萌芽論壇