第二个 Instagram 按钮的 CSS 属性

Question

Monkey Mutant

Asked:2020-05-12 09:56:24 +0000 UTC2020-05-12 09:56:24 +0000 UTC 2020-05-12 09:56:24 +0000 UTC

这个游标是怎么做的？

772

我想从https://www.peststopboys.co.uk/复制效果

背景中的人物本身并不有趣。

我对光标的效果很感兴趣......很明显有一个带有动画的形状，但是在这个形状的中心有一个点，当你移动鼠标时，这个点像蠕虫一样伸展......一个非常有趣的效果，但我不能重复它......

问题本身就从这里诞生了：如何通过改变里面的文字颜色，在文字上做出漂亮的悬停效果？

后来我把答案比答案改了一点，得到了一定的结果，但是这个小细节困扰着——

这样的虫子是怎么做出来的？

我使用动画光标的实现，除了蠕虫

let item = document.querySelector(".animate-element");
let body = document.querySelector("body");

let x = body.getBoundingClientRect().x;
let y = body.getBoundingClientRect().y;



body.onmousemove = function(e) {

  item.style.position = "fixed"
  item.style.left = e.x - 150 + "px";
  item.style.top = e.y - 150 + "px";
}

body {
  position: relative;
  cursor: none;
  filter: url(#goo);
  -webkit-filter: url(#goo);
}

.animate-element {
  width: 300px;
  transition: 0.14s linear;
}

.goo {
  position: fixed;
  top: 50%;
  left: 50%;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" class="goo">
			  <defs>
			    <filter id="goo">
			      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
			      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo"></feColorMatrix>
			      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
			    </filter>
			  </defs>
			</svg>

<svg viewBox="0 0 300 300" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0,3)">
  <g stroke-width=".26458">
   <path d="m24.19 19.565h70.304v152.7h-70.304z" fill="#ff2a2a"/>
   <path d="m171.6 166.98-30.187-141.32 137.48 44.518z" fill="#0ff"/>
   <path d="m123.22 166.98h3.7821c24.708 0 44.6 19.892 44.6 44.6v34.02c0 24.708-19.892 44.6-44.6 44.6h-3.7821c-24.708 0-44.6-19.892-44.6-44.6v-34.02c0-24.708 19.892-44.6 44.6-44.6z" fill="#ff0"/>
  </g>
 </g>
</svg>

<div class="animate-element">
  <svg viewBox="0 0 300 300">
  <path d="M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 " fill="rgba(0,255,0,0.6)" class="anim">
    <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 253.24403,163.95239 c 0,58.86764 -51.44461,106.58929 -114.90475,106.58929 -63.46014,0 -113.098711,-47.74936 -114.904748,-106.58929 -1.854318,-60.4129 42.237174,-114.262147 114.904748,-106.589284 63.10931,6.66362 114.90475,47.721644 114.90475,106.589284 z;M 253.24403,163.95239 C 248.34588,222.6159 201.79942,270.54168 138.33928,270.54168 74.87914,270.54168 25.240569,222.79232 23.434532,163.95239 21.580214,103.53949 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 C 263.32846,226.55868 223.5326,264.18332 138.33928,270.54168 55.700924,276.70935 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 243.39295,102.79476 253.24403,163.95239 Z;M 253.24403,163.95239 C 248.34588,222.6159 200.57626,258.14218 138.33928,270.54168 57.068323,286.73333 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 "
             repeatCount="indefinite" />
  </path>
  <path fill="red" d="M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z">
       <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 92.22618,159.41668 c -7.015842,2.69322 -6.938254,13.60714 -15.497022,13.60714 -8.558768,0 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 7.003489,-12.5524 15.497022,-13.60715 37.200652,-4.61966 49.259242,0.64661 15.497022,13.60715 z;m 92.22618,159.41668 c 8.30303,8.62209 13.81279,16.37395 -15.497022,13.60714 -8.520887,-0.80436 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 10.284199,8.19402 15.497022,13.60715 z;m 92.22618,159.41668 c -10e-7,7.51502 -7.557009,10.41203 -15.497022,13.60714 -21.591714,8.68863 -19.572869,-3.37489 -15.497022,-13.60714 2.780975,-6.98153 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 15.497027,6.09213 15.497022,13.60715 z;M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z "
             repeatCount="indefinite"
                class="goo2"/> 
  </path>
</svg>
</div>

2 个回答

Voted

user355286 · Answer 1 · 2020-05-12T10:32:18Z

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
let width = canvas.width = innerWidth
let height = canvas.height = innerHeight
/* -------------------------------------------- */

const mouse = { x: 0, y: 0 }
const points = []
const numPoints = 6
const ease = 0.7
const radius = 15

for (let i = 0; i < numPoints; i++) points.push({ x: 0, y: 0 })

onmousemove = e => {
  mouse.x = e.x
  mouse.y = e.y
}

function update() {
  context.clearRect(0, 0, width, height)

  const head = { x: mouse.x, y: mouse.y }

  points.forEach((point, i) => {
    point.x += (head.x - point.x) * ease
    point.y += (head.y - point.y) * ease

    context.beginPath()
    context.arc(point.x, point.y, radius - i, 0, Math.PI*2, false)
    context.fill()

    head.x = point.x
    head.y = point.y
  })

  requestAnimationFrame(update)
}

update()

/* -------------------------------------------- */
onresize = () => {
  width = canvas.width = innerWidth
  height = canvas.height = innerHeight
}

html,body {
  margin: 0;
  cursor: none;
}

canvas {
  display: block;
}

<canvas id="canvas"></canvas>

Monkey Mutant · Answer 2 · 2020-05-12T15:35:11Z

我在 javascript 和普通块 + transitionDelay 上做到了

let item = document.querySelectorAll(".circle");
let body = document.querySelector("body");
let sec = 0.0016;

body.onmousemove = function(e) {
  item.forEach(function(el, index) {
    el.style.position = "absolute"
    el.style.left = e.clientX - 0.2 + "px";
    el.style.top = e.clientY - 0.2 + "px";
    el.style.transitionDelay = `${sec * index/1.4}s`;
  })
}

html,
body {
  height: 100%;
  margin: 0;
}

.item {
  width: 30px;
  height: 30px;
  position: relative;
}

.item .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition: 0.03s ease;
  transform: translate(-50%, -50%);
  background: #000;
}

.c1 {
  width: 25px;
  height: 25px;
  z-index: 10;
}

.c2 {
  width: 24px;
  height: 24px;
  z-index: 9;
}

.c3 {
  width: 23px;
  height: 23px;
  z-index: 8;
}

.c4 {
  width: 22px;
  height: 22px;
  z-index: 7;
}

.c5 {
  width: 21px;
  height: 21px;
  z-index: 6;
}

.c6 {
  width: 20px;
  height: 20px;
  z-index: 5;
}

.c7 {
  width: 19px;
  height: 19px;
  z-index: 4;
}

.c8 {
  width: 18px;
  height: 18px;
  z-index: 3;
}

.c9 {
  width: 17px;
  height: 17px;
  z-index: 2;
}

.c10 {
  width: 16px;
  height: 16px;
  z-index: 1;
}

<div class="item">
  <div class="circle c1"></div>
  <div class="circle c2"></div>
  <div class="circle c3"></div>
  <div class="circle c4"></div>
  <div class="circle c5"></div>
  <div class="circle c6"></div>
  <div class="circle c7"></div>
  <div class="circle c8"></div>
  <div class="circle c9"></div>
  <div class="circle c10"></div>
</div>

这个游标是怎么做的？

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

这个游标是怎么做的？

2 个回答

相关问题