鼠标经过，油漆滴落效果，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> <script src="https://cdn...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <button class="font-style">
  鼠标经过

  <!-- If you have time, it would be better to generate this SVG for each button you want the effect on -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 98">
    <defs>
      <mask id="mask">
        <circle class="mask" r="0" fill="#fff" cx="0" cy="50" />
      </mask>
    </defs> 

    <g id="toBeRevealed" mask="url(#mask)">
    <linearGradient id="gradient">
        <stop stop-color="#fc0f47" offset="0%" />
        <stop stop-color="#9b040c" offset="100%" />
      </linearGradient>
      <rect width="426" height="98" fill="url(#gradient)" />
      <text x="15" y="81" class="font-style" textAnchor="start" fill="#fff">鼠标经过</text>
    </g>
  </svg>
</button>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

            
            html,
body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #202020;
}

.font-style {
  /* font-family: 'Heebo', sans-serif; */
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  text-stroke: 0.1rem rgba(255,255,255, 0.5);
  -webkit-text-stroke: 0.1rem rgba(255,255,255, 0.5);
  white-space: nowrap;
  /* Unfortunately letter-spacing and text-length don't line up with HTML text across the different browsers... */
  /* ...so you're forced to just leave the letter spacing as is. */
}

button {
  margin: 0;
  padding: 8px 19px 0 16px;
  border: 0;
  background: none;
  cursor: pointer;
  color: transparent;
  position: relative;
  overflow: hidden;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 1px;
  width: 100%;
  height: 100%;
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

            
            const button = document.querySelector('button');
const buttonWidth = button.clientWidth;
const buttonHeight = button.clientHeight;
const buttonStyles = button.getBoundingClientRect();

button.addEventListener('mouseenter', mouseEnter);
button.addEventListener('mouseleave', mouseLeave);

function mouseEnter(e) {
  // Figure out the co-ordinates of the cursor over the button
  // We will trigger the hover animation from that position
  const xPercent = ((e.clientX - buttonStyles.left) / buttonWidth) * 100;
  const yPercent = ((e.clientY - buttonStyles.top) / buttonHeight) * 100;
  
  // If the cursor is far from the center of the button the hover will be slower since we have more area to fill
  // To fix this we increase the animation speed the further you are from the center of the button
  let transitionMultiplier = xPercent < 50 ? ((xPercent - 50) * -1) / 50 : (xPercent - 50) / 50;
  const speed = 1.3;
  const speedBasedOnCursorPosition = speed - ((speed * 0.65 ) * transitionMultiplier);

  TweenMax.set('.mask', {
    opacity: 1,
    attr: {
      r: 0,
      cx: e.clientX - buttonStyles.left,
      cy: e.clientY - buttonStyles.top
    }
  });
  new TimelineMax().to('.mask', speedBasedOnCursorPosition, {
    ease: Power4.easeOut,
    attr: { r: buttonWidth * 0.4 }
  });
}

function mouseLeave() {
  const tl = new TimelineMax()
        .to('.mask', 0.2, {ease: Power1.easeOut, opacity: 0});
}

预览

控制台