分享CodePen上六个酷炫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代码:

  @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)}
  }
 

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();

4、雪球圣诞树

Amit Sheen 在 YouTube 上直播了整个过程（您仍然可以在他的频道上观看），让每个人都了解如何使用 HTML 和 CSS 创建这棵 3D 外观的圣诞树。

css代码:

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #001;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1000px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

$srDuration: 120s;
$flDuration: 12s;

.scene {
  position: relative;
  animation: sceneRotate $srDuration infinite linear;
  
  @keyframes sceneRotate {
    to { rotate: y 1turn; }
  }
  
  * { position: absolute; }
}

.floor {
  inset: -100em;
  background-color: green;
  transform: rotateX(-90deg) translateZ(15em);
  background-image:
    radial-gradient(closest-side, transparent, #001),
    radial-gradient(closest-side, #000, transparent 15em),
    repeating-linear-gradient(#fff2 0, transparent, #fff2 2em),
    repeating-linear-gradient(90deg, #fff2 0, transparent, #fff2 2em)
    ;
}

.snowglobe {
  cursor: pointer;
  animation: var(--animation, snowglobe) $flDuration;
  
  @keyframes snowglobe {
    0%, 100% { pointer-events: none; }
  }

  &:active {
    --animation: none;
  }
}

.text {
  top: -20em;
  animation: sceneRotate $srDuration infinite linear reverse;
  
  i {
    font-size: 3em;  
    width: max-content; 
    translate: -50%;
    animation: var(--animation, text) $flDuration ease-in-out;
    
    @keyframes text {
      0%, 95% { opacity: 0; } 
      100% { opacity: 1; } 
    }  
  }
}

.base {
  transform: translateY(11em);
  
  i {
    inset: -10em -2.7em;
    background-color: maroon;
    background-image: radial-gradient(circle, transparent, 90%, #0007);
    transform: rotateX(-90deg) rotate(var(--angle, 0));
    
    @for $i from 0 to 6 {
      &:nth-child(#{$i + 1}) {
        --angle: #{$i * 30deg};
      }      
    }
    
    &::before, &::after {
      content: '';
      position: absolute;
      width: 100%; height: 4em;
      box-shadow: 0 0 1em #0007 inset;
      background-color: inherit;
      transform-origin: top;
      transform: rotateX(90deg);
    }
    
    &::after { top: 100%; }
  }
}

.glass {
  inset: -15em;
  background-image: radial-gradient(farthest-side at 50% 60%, transparent, 95%, #fff5);
  border-radius: 50%;
  animation: sceneRotate $srDuration infinite linear reverse;
  
  &::after {
    content: '';
    position: absolute;
    inset: 2em;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 60%, transparent 65%, #ff7a 85%);
    filter: blur(1em);
    animation: lightblur $srDuration infinite ease-in-out;
    
    @keyframes lightblur {
      0%, 100% { rotate: -45deg; }
      50% { rotate: 45deg; }
    }
  }
}

.tree {
  .trunk {
    inset: -7em -1em;
    transform: translateY(4em);
    background-color: brown;
    border-radius: 50% / 90% 90% 3% 3%;
    animation: sceneRotate $srDuration infinite linear reverse;
  }

  .leafs i {
    top: var(--top, 0);
    width: 8em;
    aspect-ratio: 1;
    background-image: radial-gradient(circle at top left, #000, green);
    border-radius: 0 0 100% 0;
    transform-origin: top left;
    transform: rotateY(var(--ry)) rotateX(45deg) rotateZ(45deg) scale(var(--scale, 1));
    
    $angle: 0;
    @for $i from 0 to 48 {
      &:nth-child(#{$i + 1}) {
        $angle: $angle + 60 + random(60);
        --top: #{-5 + $i * 0.2}em;
        --ry: #{$angle}deg;
        --scale: #{0.25 + $i / 75};
      }      
    }
  }

  .lights i {
    inset: -0.4em;
    background-color: hsl(var(--hue) 100% 50%);
    background-image: radial-gradient(circle at top, transparent, #0007);
    box-shadow: 0 0 0.5em #fff7;
    transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em));
    border-radius: 50%;
    animation: lightRotate $srDuration infinite linear reverse;
    
    @keyframes lightRotate {
      from { transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em)) rotateY(calc(0deg - var(--ry))); }
      to { transform: translatey(var(--ty)) rotateY(var(--ry, 0)) translateZ(var(--tz, 5em)) rotateY(calc(360deg - var(--ry))); }
    }

    $angle: 0;
    @for $i from 0 to 48 {
      &:nth-child(#{$i + 1}) {
        $angle: $angle + 60 + random(60);
        --ty: #{-4 + $i * 0.25}em;
        --tz: #{1 + $i * 0.09}em;
        --ry: #{$angle}deg;
        --hue: #{random(360)};
      }      
    }
  }
}

.flakes {
  transform: translateY(11em) rotateX(-90deg);
  animation: var(--animation, flakes) $flDuration ease-in-out;
  
  @keyframes flakes {
    0%, 100% { transform: translateY(11em) rotateX(-90deg); }
    25%, 50% { transform: translateY(0em) rotateX(-90deg); }
  }
  
  i {
    inset: -0.35em;
    background-color: hsl(55 100% var(--light, 100%));
    rotate: var(--rotate1);
    transform: translateX(var(--tx1));
    animation:
      var(--animation, flakeRotate) $flDuration ease-in-out,
      var(--animation, flakeTransform) $flDuration ease-in-out;
    
    @keyframes flakeTransform {
      0% { transform: rotateY(0deg) translateX(var(--tx1)) rotate3d(1, 1, 1, 0deg); } 
      25% { transform: rotateY(var(--ry)) translateX(var(--tx2)) rotate3d(1, 1, 1, calc(var(--r3d) * 0.25)); animation-timing-function: linear; } 
      50% { transform: rotateY(var(--ry)) translateX(var(--tx2)) rotate3d(1, 1, 1, calc(var(--r3d) * 0.5)); } 
      100% { transform: rotateY(0deg) translateX(var(--tx1)) rotate3d(1, 1, 1, var(--r3d)); } 
    }
    
    @keyframes flakeRotate {
      from { rotate: var(--rotate1); }
      to { rotate: var(--rotate2); }
    }

    @for $i from 0 to 256 {
      &:nth-child(#{$i + 1}) {
        $r: random(360);
        --rotate1: #{$r}deg;
        --rotate2: #{$r + 5 * 360}deg;
        --tx1: #{(random(100) / 100) * 5 + 3}em;
        --tx2: #{(random(100) / 100) * 6 + 7}em;
        --light: #{70 + random(30)}%;
        --ry: #{random(120) - 45}deg;
        --r3d: #{random(8) + 8}turn;
      }      
    }
  }
}

.star {
  position: absolute;
  top: -5.5em;

  i {
    position: absolute;
    left: -1.25em;
    width: 2.5em; height: 0.5em;
    background-color: gold;
    background-image: linear-gradient(90deg, transparent, #000a);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top;
    transform: 
      rotate(var(--angle))
      translateY(-0.41em)
      rotateX(var(--rx, 35deg));

    &:nth-child(5n + 1) { --angle: 0deg; }
    &:nth-child(5n + 2) { --angle: 72deg; }
    &:nth-child(5n + 3) { --angle: 144deg; }
    &:nth-child(5n + 4) { --angle: 216deg; }
    &:nth-child(5n + 5) { --angle: 288deg; }

    &:nth-child(n + 6) { --rx: -35deg; }
  }
}

5、点状旋转加载动画

这是 Josetxu 用 HTML 和 CSS 创建的催眠加载器。一个有趣的动画组合创造了这种效果，点在改变大小（和 z 索引）的同时移动。

css代码:

:root {
  --w: #fafafa; 
  --b: #141414; 
  --s: 1s;
  --d: calc(var(--s) / 6);
}

$d: var(--d);

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

input {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 4;
  opacity: 0;
  cursor: pointer;
  &:checked ~ div {
    filter: invert(1);
  }
  &:checked + .bg:before {
    content: "CLICK TO DARK";   
  }
}

.bg:before {
  content: "CLICK TO LIGHT";
  position: absolute;
  color: var(--w);
  width: 100%;
  text-align: center;
  bottom: 10vh;
  font-family: Arial, Helvetica, serif;
  font-size: 12px;
  text-shadow: 0 0 1px var(--w);
  opacity: 0.25;
}

body, .dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background: var(--b);
  z-index: -2;
}

.dots {
  width: 50vmin;
  height: 50vmin;
  position: relative;
}

.ring {
  border: 1.5vmin solid var(--w);
  width: 64%;
  height: 64%;
  border-radius: 100%;
  z-index: 0;
  box-shadow: 0 0 0 1vmin var(--b), 0 0 0 1vmin var(--b) inset;
}

.dot {
  width: 50%;
  position: absolute;
  height: 7vmin;
  left: 0;
  transform-origin: 100% 50%;
  z-index: -1;
  animation: 
    over-ring calc(var(--s) * 2) linear 0s infinite, 
    spin calc(var(--s) * 8) linear 0s infinite;
  &:before {
    content: "";
    width: 5.5vmin;
    height: 5.5vmin;
    left: 0;
    box-sizing: border-box;
    border: 1vmin solid var(--b);
    position: absolute;
    background: var(--w);
    border-radius: 100%;
    animation: ball var(--s) ease-in-out 0s infinite alternate;
  }
  @for $i from 1 through 12 { 
    &:nth-child(#{$i}) {
      $n: (($i - 1) * -1);
      $n4: ($n * 4);
      animation-delay: calc(#{$d} * #{$n}), calc(#{$d} * #{$n4});
      &:before {
        animation-delay: calc(#{$d} * #{$n});
      }
    }
  }
}

@keyframes spin {
  100% { transform: rotate(-360deg); }  
}

@keyframes ball {
  100% { left: 12vmin; width: 4vmin; height: 4vmin; } 
}

@keyframes over-ring {
  0%, 50% { z-index: -1; }  
  51%, 100% { z-index: 1; } 
}

6、Wow 冬季毯子

另一个带有 ThreeJS 和着色器的演示。这次是安娜·禅恩·清道夫（Anna Zenn Scavenger）的作品。这是 CodePen 每周关于对立面挑战的一部分。将鼠标移到毯子上以查看其平稳移动。

js代码:

import * as THREE from 'https://unpkg.com/three@0.118.3/build/three.module.js';

let container, scene, camera, renderer;
let blanket;

// LANDSCAPE / PORTRAIT

let isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);
let windowRatio = window.innerWidth / window.innerHeight;
let isLandscape = (windowRatio > 1) ? true : false;

// MOUSE

let isMouseMove = false;
let mouseX = 0;

const clock = new THREE.Clock();

init();
render();

function init() {
  
  container = document.querySelector("#scene-container");

  scene = new THREE.Scene();

  initCamera();
  initLights();
  initRenderer();
  
  initBlanket();
  
  window.addEventListener('resize', onWindowResize, false);
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('touchmove', onTouchMove);
  window.addEventListener('mouseout', onMouseLeave);
  
}

function initCamera() {
  
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 2.0, 10.0);
  camera.position.z = (windowRatio > 2) ? ((5 / windowRatio) + 9) : (15 / windowRatio);
  
}

function initLights() {

  const dirLight = new THREE.DirectionalLight(0xffffff, 0.75);
  dirLight.position.set(-0.5, 10, -10);
  scene.add(dirLight);

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  //ambientLight.position.set(0.5, 10, -5);
  scene.add(ambientLight);

}

function initRenderer() {
    
  renderer = new THREE.WebGLRenderer({alpha: true, antialias: true });
  // renderer.setPixelRatio(window.devicePixelRatio > 1.4 ? Math.min(window.devicePixelRatio, 1.25) : Math.min(window.devicePixelRatio, 1.25));
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.outputColorSpace = THREE.SRGBColorSpace;
  container.appendChild(renderer.domElement);
    
}

function initBlanket() {
  
  const SIZE = 6.5;
  const RESOLUTION = 75;

  const geometry = new THREE.PlaneBufferGeometry(SIZE, SIZE, RESOLUTION, RESOLUTION);
  geometry.rotateX(-0.5 * Math.PI);

  const tartanMaterial = new THREE.ShaderMaterial({
  
    lights: true,
    side: THREE.DoubleSide,
  
    extensions: {
      derivatives: true,
    },

    defines: {
      STANDARD: '',
      PHYSICAL: '',
    },

    uniforms: {
    
      ...THREE.ShaderLib.physical.uniforms,
      roughness: { value: 0.0 },
      diffuse: {value: new THREE.Color(0xffffff)},
      time: { value: 0.0 },
      amplitude: { value: 0.4 },
      frequency: { value: 0.4 },
      speed: { value: 0.3 },
      u_time: { value: 0.0 },
      u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    
    },

    vertexShader: monkeyPatch(THREE.ShaderChunk.meshphysical_vert, {
    
      header: `
        uniform float time;
        uniform float amplitude;
        uniform float speed;
        uniform float frequency;
      
        varying vec2 vUv;

        ${noise()}
      
        float displace(vec3 point) {
          return noise(vec3(point.x * frequency, point.z * frequency, time * speed)) * amplitude;
        }
      
        // http://lolengine.net/blog/2013/09/21/picking-orthogonal-vector-combing-coconuts
        vec3 orthogonal(vec3 v) {
          return normalize(abs(v.x) > abs(v.z) ? vec3(-v.y, v.x, 0.0)
        : vec3(0.0, -v.z, v.y));
        }
      `,
      // adapted from http://tonfilm.blogspot.com/2007/01/calculate-normals-in-shader.html
      main: `
        vec3 displacedPosition = position + normal * displace(position);

        float offset = ${SIZE / RESOLUTION};
        vec3 tangent = orthogonal(normal);
        vec3 bitangent = normalize(cross(normal, tangent));
        vec3 neighbour1 = position + tangent * offset;
        vec3 neighbour2 = position + bitangent * offset;
        vec3 displacedNeighbour1 = neighbour1 + normal * displace(neighbour1);
        vec3 displacedNeighbour2 = neighbour2 + normal * displace(neighbour2);

        // https://i.ya-webdesign.com/images/vector-normals-tangent-16.png
        vec3 displacedTangent = displacedNeighbour1 - displacedPosition;
        vec3 displacedBitangent = displacedNeighbour2 - displacedPosition;

        // https://upload.wikimedia.org/wikipedia/commons/d/d2/Right_hand_rule_cross_product.svg
        vec3 displacedNormal = normalize(cross(displacedTangent, displacedBitangent));
      `,

      '#include ': THREE.ShaderChunk.defaultnormal_vertex.replace(
      // transformedNormal will be used in the lighting calculations
      'vec3 transformedNormal = objectNormal;',
      `vec3 transformedNormal = displacedNormal;`
      ),

      // transformed is the output position
      '#include ': `vUv = uv;`,
      '#include ': `
        transformed = displacedPosition;
      `,
    }),
  
    fragmentShader: monkeyPatch(THREE.ShaderChunk.meshphysical_frag, {
    
      header: `
      
        #define FREQUENCY 40
        #define TILT -60
        #define PATTERN 0.7
      
        varying vec2 vUv;
        uniform vec2 u_resolution;
      
        float coordinateGrid(vec2 r, float lineWidth, float offset, bool doubleLine) {

          float pixel = 0.0;
  
  for(float i = 0.0; i  str.split(find).join(rep);
  
  Object.keys(replaces).forEach((key) => {
    
    patchedShader = replaceAll(patchedShader, key, replaces[key])
    
  });

  patchedShader = patchedShader.replace(
    'void main() {',
    `
    ${header}
    void main() {
      ${main}
    `
  );

  return `
    ${defines}
    ${patchedShader}
  `

}

// * EVENTS *

function onWindowResize() {
  
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
}

function onMouseMove(event) {
  
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  isMouseMove = true;
  console.log(mouseX);
    
}

function onTouchMove(event) {
    
  let x = event.changedTouches[0].clientX;
  mouseX = (x / window.innerWidth) * 2 - 1;
  isMouseMove = true;
        
}

function onMouseLeave(event) {
  
  console.log('mouseleft');
  isMouseMove = false;
        
}

最后

下周我会继续对话一些优秀的开源和独立开发者。