分享CodePen上6个酷炫demo特效

最近创作灵感匮乏, 来 CodePen 上找找灵感, 同时也给同样需要获取灵感的 coder (程序员们)带来一点点想象空间.

首先分享一下 CodePen demo 集合网址:

• https://codepen.io/spark

1. 像素背景

这是 Wakana Y.K. 的一个巧妙的技巧：将图像的低分辨率版本放在顶部，并将其扩展以占据与原始图像相同的大小，使浏览器对其进行像素化。然后，悬停时的蒙版（使用 JS 更新位置）完成剩下的工作。巧妙而有效。

css代码如下:

@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400&display=swap");
:root {
  --x: 50%;
  --y: 50%;
  --radius: 30vmin;
  --blur: 3vmax;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: black;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  overflow: hidden;
}
body {
  width: 100vw;
  height: 100vh;
  font-family: "Lexend", serif;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  z-index: 1;
}
h1 {
  font-size: 7vw;
  color: white;
  text-shadow: 1px 1px 1vw rgba(0, 0, 0, 0.3);
}
#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
#bg_focus {
  mask-image: radial-gradient(
    circle 50vmin at var(--x) var(--y),
    black var(--radius),
    transparent calc(var(--radius) + var(--blur)),
    transparent
  );
}
#bg_pixelate {
  image-rendering: pixelated;
}
/*
#bg img:nth-of-type(2) {
  filter: hue-rotate(50deg);
  animation-name: animation;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
@keyframes animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
*/

2. 烟火特效

用技术复原童年的烟火味, css代码:

<css-doodle click-to-update><style>
  @grid: 30 / 60vmin noclip;
  border-radius: 50%;
  background: hsl(@y(* -12), 80%, 60%);
  background: lch(90, 120, @y(*10deg));
  animation: f @once.p(5s, 7.5s) ease infinite;
  animation-delay: $s(-90/@I*@i(-1)*@x/@y);
  @keyframes f {
    0%, 25%, 80% {opacity: 1; scale: .2}
    25%, 75%, 100% {opacity: 0; scale: @r(2, 3)}
  }
 </style></css-doodle>

3. 动态模糊

Tom Hinton 的这个演示吸引我的是它看起来多么随机和奇怪（以一种好的方式）（这在 Tom 的艺术作品中相对常见。ThreeJS 中着色器和网格的组合。

js 代码如下:

let camera, scene, renderer, clock;
let uniforms;

function init() {
  const container = document.getElementById("shader");

  clock = new THREE.Clock();
  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  const geometry = new THREE.PlaneBufferGeometry(2, 2);
  
    const texture = new THREE.TextureLoader().load( 'https://upload.wikimedia.org/wikipedia/commons/8/84/Male_and_female_chicken_sitting_together.jpg' );

  uniforms = {
    u_time: { type: "f", value: 1.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    uTexture: {
      value: texture
    }
  };

  const material = new THREE.ShaderMaterial({
    uniforms,
    vertexShader: document.getElementById("vertex").textContent,
    fragmentShader: document.getElementById("fragment").textContent
  });
  
  material.transparent = true

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({alpha: true});
  renderer.setPixelRatio(window.devicePixelRatio);

  container.appendChild(renderer.domElement);

  onWindowResize();
  window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

function render() {
  uniforms.u_time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
}

function animate() {
  render();
  requestAnimationFrame(animate);
}

init();
animate();