最近创作灵感匮乏, 来 CodePen
上找找灵感, 同时也给同样需要获取灵感的 coder
(程序员们)带来一点点想象空间.
![d6d447f9fb633be846a15cc8f6e5e83f.png](https://i-blog.csdnimg.cn/blog_migrate/100d6e7c99855223950c084a37b325c0.png)
首先分享一下 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();