分享CodePen上六個酷炫demo特效
作者：徐小夕
將圖像的低分辨率版本放在頂部，并將其擴展以占據與原始圖像相同的大小，使瀏覽器對其進行像素化。然后，懸停時的蒙版（使用 JS 更新位置）完成剩下的工作。巧妙而有效。
最近創作靈感匱乏, 來 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();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 <defaultnormal_vertex>': 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 <morphtarget_vertex>': `vUv = uv;`,
'#include <displacementmap_vertex>': `
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 < 2.0; i += PATTERN) {
float x = mod(i, PATTERN * 2.0);
if (doubleLine) {
if (x == 0.0) {
pixel += 1.0 - step(lineWidth, abs(r.x - i - offset)); //first x line
pixel += 1.0 - step(lineWidth, abs(r.y - i + offset)); //first y line
} else {
pixel += 1.0 - step(lineWidth, abs(r.x - i + offset)); //second x line
pixel += 1.0 - step(lineWidth, abs(r.y - i - offset)); //second y line
}
} else {
pixel += 1.0 - step(lineWidth, abs(r.x - i*2.0 - offset)); //first x line
pixel += 1.0 - step(lineWidth, abs(r.y - i*2.0 + offset)); //first y line
}
}
return pixel;
}
`,
main: ``,
'#include <logdepthbuf_fragment>': `
vec2 r = vUv;
vec4 lightred = vec4(220.0/255.0, 23.0/255.0, 10.0/255.0, 1.0);
vec4 darkRed = vec4(120.0/255.0, 12.0/255.0, 30.0/255.0, 1.0);
vec4 yellow = vec4(190.0/255.0, 170.0/255.0, 59.0/255.0, 1.0);
vec4 white = vec4(242.0/255.0, 242.0/255.0, 203.0/255.0, 0.1);
vec4 blue = vec4(5.0/255.0, 10.0/255.0, 0.0/255.0, 0.8);
vec4 purp = vec4(0.0/255.0, 0.0/255.0, 0.0/255.0, 0.9);
vec4 pixel = lightred; // bg color
pixel = mix(pixel, darkRed, coordinateGrid(r, 0.15, 0.0, true)); //paired line
pixel = mix(pixel, white, coordinateGrid(r, 0.01, 0.005, true)); //paired line
pixel = mix(pixel, white, coordinateGrid(r, 0.01, -0.35, false)); //paired line
pixel = mix(pixel, purp, coordinateGrid(r, 0.01, -0.4, false)); //single line
pixel = mix(pixel, purp, coordinateGrid(r, 0.01, -0.3, false)); //single line
pixel = mix(pixel, blue, coordinateGrid(r, 0.02, 0.15, true)); //paired line
pixel = mix(pixel, yellow, coordinateGrid(r, 0.01, 0.05, true)); //paired line
float stripe = fract( dot(r, vec2(FREQUENCY,TILT)));
pixel = mix(pixel, darkRed, stripe);
diffuseColor = pixel;
`,
})
});
blanket = new THREE.Mesh(geometry, tartanMaterial);
blanket.position.set(0, 2.0, -0.5);
blanket.rotation.set(Math.PI * 0.1, Math.PI * 0.25, 0);
scene.add(blanket);
}
function render() {
update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function update() {
let t = clock.getDelta();
if (isMouseMove) {
blanket.material.uniforms.time.value = 0.1 + 3.0 * mouseX;
} else {
blanket.material.uniforms.time.value += 3.0 * t;
}
}
// * UTILS *
function monkeyPatch(shader, { defines = '', header = '', main = '', ...replaces }) {
let patchedShader = shader;
const replaceAll = (str, find, rep) => 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;
}最后
下周我會繼續對話一些優秀的開源和獨立開發者。
責任編輯：姜華
來源：
趣談前端
