简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何製作像Windows 10設定中的懸停功能？
P粉020556231
P粉020556231 2023-09-12 13:02:00
0
1
470

有人可以告訴我如何在 css 中進行這樣的懸停嗎？

這是 Windows 10 設定的範例。但我想在 css 中複製它。

P粉020556231
P粉020556231

全部回覆(1)
P粉515066518
P粉5150665182023-09-13 00:20:32 1樓

您可以使用多個漸層背景圖像來獲得懸停時的效果。

這是一個例子。顯然，請嘗試各種設置，直到您獲得想要的外觀為止。 

<style>
  body {
    background: black;
  }
  
  div {
    width: 150px;
    height: 50px;
    color: red;
  }
  
  div:hover {
    background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent);
    background-size: 100% 1px, 1px 100%, 100% 100%;
    background-position: top left, top left, 1px 1px;
    background-repeat: no-repeat;
  }
</style>

<body>
  <div>Hover here</div>
</body>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！