鼠标悬停效果十

紫微前端

于 2022-06-30 12:15:53 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签：前端 html javascript

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125538117

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文介绍了如何使用HTML和JavaScript创建丰富的鼠标悬停效果，通过实例代码详细阐述了实现过程，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h3 class="d-1">1. Hover Me</h3>
<h3 class="d-2">2. Hover Me</h3>
<style>
.d-1 {
  --c: #1095c1; /* the color */
  --b: .1em;    /* border length*/
  --d: 20px;    /* the cube depth */
  
  --_s: calc(var(--d) + var(--b));
  
  color: var(--c);
  border: solid #0000;
  border-width: var(--b) var(--b) var(--_s) var(--_s);
  background:
    conic-gradient(at left var(--d)  bottom var(--d),
      #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
      #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b))

了解本专栏