![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
动态构件
文章平均质量分 62
动态构件
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
女巫煎蛋(omelette for a witch)
女巫煎蛋omelette for a witch示例HTMLcssJS更多有趣示例 尽在小红砖社区示例HTML<div id="scene-container"></div><button id="btn-animate"></button><script id="vertex_shader" type="x-shader/x-vertex">varying vec3 vNormal;void main() { vNo原创 2020-07-09 11:58:58 · 240 阅读 · 0 评论 -
迷幻粒子
迷幻粒子示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<p id="help">Try your mouse ^^</p>CSShtml,body { margin: 0; padding: 0; width: 100%; height: 100%;}canvas { position: fixed; width: 100%; height: 100%; z-index: -1;}#help { fo原创 2020-12-14 14:37:38 · 163 阅读 · 0 评论 -
背景网格(background grid)
背景网格示例CSSJS示例CSS*{ margin:0; padding:0;}html,body{ width:100%; height:100%;}body{ background:#222; &:after{ content:''; display:block; width:100%; height:1...原创 2020-03-02 14:50:18 · 1104 阅读 · 0 评论 -
环式加载(rings loader )
环式加载示例HTMLCSS示例HTML.loader(style=`--bg: hsl(${Math.random() * 360}, 100%, 85%)`) - let i = 0 while i < 8 .dot(style=`--index: ${i}`) - i++CSS* box-sizing border-boxbody al...原创 2020-03-02 16:02:54 · 251 阅读 · 0 评论 -
飞溅加载器(splash loader)
飞溅加载器示例HTMLCSSJS示例HTML<div class="splash-loader"> <div class="middle"></div></div><!-- dribbble - twitter --><a class="dribbble" href="https://dribbble.com/...原创 2020-03-02 16:17:40 · 302 阅读 · 0 评论 -
3D圆形加载器(circle loader)
3D圆形加载器示例HTMLCSSJS示例HTML<canvas></canvas><!-- twitter / dribbble --><a href="https://greensock.com" target="_blank"><img class="gsap-3-logo" src="https://s3-us-west-2...原创 2020-03-02 17:05:02 · 424 阅读 · 0 评论 -
旅行(travel)
旅行示例HTMLCSSJS示例HTML#containerCSShtml background: black height: 100% overflow: hiddenbody height: 100% margin: 0 padding: 0 position: relative z-index: 10canvas animation: ...原创 2020-03-03 15:13:47 · 194 阅读 · 0 评论 -
等距图标导航栏(isometric icon Nav Bar)
等距图标导航栏示例HTMLCSS示例HTML<ul class="icon-list"> <li class="icon-list__item"> <a href="#"> <div class="box"> <div class="box__face box__face--front">...原创 2020-03-03 15:30:58 · 283 阅读 · 0 评论 -
黑桶(makis)
黑桶示例HTMLCSSJS更多有趣示例 尽在 小红砖社区示例HTML<section class="main-container"> <div class="order-container"> <h1 class="title1">ThreeJS makis</h1> <ul class="order-menu"> ...原创 2020-04-10 10:54:43 · 430 阅读 · 0 评论 -
鼠标波(Mouse wave)
鼠标波示例代码CSSJS更多有趣示例 尽在 小红砖社区示例代码CSSbody { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;}JS// Inspired by Mystro https://codepen.io/mystroken/pen/daWMwNconst ...原创 2020-04-10 14:04:19 · 174 阅读 · 0 评论 -
无限跳跃墨水(infinity jumping ink)
无限跳跃墨水(infinity jumping ink)示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTML<svg class="finny" viewBox="-1 -1 12 8"><defs><path id="infinite"d="M5 3C4 2 3.1 1 2 1a2 2 0 000 4c1.1 0 2-1 3-2s1.9-2 3-2a2 2 0 010 4C6.9 5 6 4 5 3" /> <原创 2020-05-12 16:57:19 · 499 阅读 · 0 评论 -
Neon Love(霓虹爱)
Neon Love(霓虹爱)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body> <canvas id="canvas" width="1400" height="600"></canvas></body>CSSbody { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat;}原创 2020-06-08 17:57:03 · 596 阅读 · 1 评论 -
板块移动
版块移动示例CSSJS更多有趣示例 尽在小红砖社区示例CSSbody { margin: 0; height: 100vh;} canvas { display: block;}h1 { position: absolute; top: 2em; left: 2em; font-family: 'Montserrat'; font-size: 7em; text-transform: uppercase;原创 2020-08-21 15:01:51 · 323 阅读 · 0 评论 -
宇宙飞机(space plane)
飞机plane示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML.spaceCSSbody {margin:0; overflow:hidden;}/** BACKGROUND SPACE ANIMATION BORROWED FROM Alan Crissey https://codepen.io/TheRealAlan/pen/gzqsy**//* Animations */@keyframes spin { from { transform:原创 2020-09-11 10:42:12 · 834 阅读 · 0 评论 -
海底世界
塑料海洋示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="ocean" class="ocean"></div><div id="overlay" class="overlay"> <div id="holder" class="holder"> <div id="settings">settings:</div> <div id="parameter">sce原创 2020-09-11 11:20:39 · 205 阅读 · 0 评论 -
动画飞机
动画飞机示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="world"></div>CSS* { margin: 0; padding: 0;}#world { position: absolute; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#87CEEB, #FFFFE0);}JSvar Colors =原创 2020-09-11 11:24:08 · 164 阅读 · 0 评论 -
质地设置
质地设置示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<canvas id="c"></canvas>CSSbody { margin: 0;}#c { width: 100vw; height: 100vh; display: block;}JS// Three.js - Textured Cube// from https://threejsfundamentals.org/threejs/threejs-textu原创 2020-09-11 11:27:20 · 115 阅读 · 0 评论 -
背景设置(Background setting)
背景设置示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<canvas id="c"></canvas>CSSbody { margin: 0;}#c { width: 100vw; height: 100vh; display: block;}JS// Three.js - Background - Scene Background Fixed Aspect// from https://threejsfundamenta原创 2020-09-15 11:08:35 · 538 阅读 · 0 评论 -
树(tree)
树(Tree)示例HTMLCSSJS示例HTML<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2020-02-04 15:16:38 · 200 阅读 · 0 评论 -
Blobby
Blobby示例HTMLCSSJS示例HTML<h1> Blobby</h1><div class="box"></div><!-- SOCIAL PANEL HTML --><div class="social-panel-container"> <div class="social-panel...原创 2020-03-06 14:56:04 · 242 阅读 · 0 评论 -
时间齿轮(Gate of time)
时间齿轮(Gate of time)示例HTMLCSS示例HTML<div id="container"> <div id="portal"> <svg id="mainGear" viewBox="-10 -10 532 532" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fi...原创 2019-12-25 17:24:26 · 1122 阅读 · 0 评论 -
后侧燃烧器(Afterburner)
后侧燃烧器(Afterburner)示例HTMLCSSJS示例HTML<html> <body> </body></html>CSSbody { margin: 0px; overflow: hidden;}canvas { width: 100%; height: 100%;}JSclass f...原创 2019-12-25 17:34:15 · 239 阅读 · 0 评论 -
自行车跟随箭头运动(Motion Path)
自行车运动路径(Motion path of bike)示例HTMLCSS示例HTML<!-- be warned: messy syntax --><svg viewBox="0 0 700 500" width="700" height="500"> <defs> <!-- group element describi...原创 2019-12-27 14:10:25 · 443 阅读 · 0 评论 -
调皮的表情图(Emoji)
调皮的表情(Emoji)示例HTMLCSSJS示例HTML<div class="main"> <div class="emoji"> <div class="emoji__eyes abs"> <div class="emoji__eye"></div> &...原创 2019-12-27 15:25:36 · 2368 阅读 · 0 评论 -
糖(Sugar)
糖示例CSSJS示例CSSbody { margin: 0; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(to bottom, #614385, #516395);}canvas { width: 100%; height: 100%;}J...原创 2020-05-06 15:53:20 · 223 阅读 · 0 评论 -
星辰球
星辰球示例HTML更多有趣示例 尽在小红砖社区示例HTML<!DOCTYPE html><html > <head> <meta charset="UTF-8"> <title>Max and Marryam group threejs project</title> <style> * {margin: 0;} #canvas { backgrou原创 2020-08-07 13:42:12 · 151 阅读 · 0 评论 -
悬浮(suspension)
悬浮示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML <!--Oles Odynets - Learning ThreeJS LibrarySat15Sep 2018 17:5027 MinsW, S, A, D, Space - Left Arrow, Right Arrow-->CSShtml, body { margin:0; overflow:hidden;}JS// MainStuff:Setuplet scene = n原创 2020-08-07 13:48:32 · 244 阅读 · 0 评论 -
吉他(guitar)
吉他(guitar)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve"><defs> <clipPath id="holeClip"> <circle c原创 2020-08-07 13:52:37 · 382 阅读 · 0 评论 -
转动的球点
转动的球点示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML.container.fixed-top.header .row .col h1 strong Sphere //p.lead – Information –CSS$white: #FFFFFF$black: #000000body color: $black margin: 0 text-align: center background-co原创 2020-09-21 18:07:36 · 123 阅读 · 0 评论 -
糖果手杖(Candy Cane)
糖果手杖(Candy Cane)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<svg viewBox="0 -20 300 300"> <defs> <filter id="drawn"> <feTurbulence baseFrequency="0.1325" numOctaves="8" /> <feDisplacementMap in="SourceGraphic" scale="10原创 2020-09-24 12:03:09 · 306 阅读 · 0 评论 -
在任意点之间画线
在任意点之间画线示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script><script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position原创 2020-09-24 13:59:50 · 190 阅读 · 0 评论 -
心跳(heartbeat)
心跳(heartbeat)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs> <pattern id="sqrs" width="40" height="40" patternUnits="userSpaceOnUse" id="pulseBg" viewBox="0 0 40 40" >原创 2020-10-09 11:24:19 · 442 阅读 · 0 评论 -
粉色的窗户(pink window)
粉色的窗户(pink window)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="container"> <div id="main-window" class="window-wrapper window"> <div class="window-view"> <div class="window-border window"> <div class="windo原创 2020-10-09 11:44:30 · 257 阅读 · 0 评论 -
跳球 (jumping ball)
跳球 jumping ball示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="gui">← Drag left / right →</div>CSScanvas { height: 100%; width: 100%;}.gui { bottom: 20px; color: black; font-family: Menlo, monospace; font-size: 11px; left: 0原创 2020-10-15 11:17:18 · 2815 阅读 · 0 评论 -
洗衣机(Washing machine)
洗衣机示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTMLdiv.main div.l div.l__face.l__face--front div.l__control div.l__control div.l__buttons div.l__button div.l__button div.l_原创 2020-10-15 11:24:28 · 467 阅读 · 0 评论 -
调光开光(Dimmer Switch)
如何在界面中添加一个调光开关?示例HTMLCSSJS示例HTML.switch .switch__faceplate button.switch__button .switch__button-face .switch__button-dim-markerCSS* -webkit-tap-highlight-color transparen...原创 2020-01-02 14:36:40 · 881 阅读 · 0 评论 -
风吹柳叶(Curtain creeper)
Curtain creeper示例CSSJS更多有趣示例 尽在小红砖社区示例CSShtml,body { margin: 0; padding: 0; height: 100%;}body { user-select:none; background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;}canvas {原创 2020-07-08 15:10:25 · 262 阅读 · 0 评论 -
Low Poly Experiment
Low Poly Experiment示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTML<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs> <polygon id="liquid"></polygon> <clipPath id="mainMask"> <polygon points="402.1原创 2020-07-08 15:14:02 · 416 阅读 · 0 评论 -
流动粒子(flow01001)
流动粒子(flow01001)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<script id="vertexShader_particle" type="x-shader/x-vertex"> attribute vec3 a_position; attribute vec3 a_particle; attribute vec2 a_reference; uniform float u_time; uniform mat4 u_m_mod原创 2021-04-21 15:17:42 · 480 阅读 · 0 评论 -
二十面体折射(Grid Icosahedron Refraction)
二十面体折射(Grid Icosahedron Refraction)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div class="relative w-screen h-screen"> <div class="grid-icosahedron w-full h-full bg-black"></div></div>CSSbody { display: flex; justify-content: ce原创 2021-03-29 15:20:12 · 207 阅读 · 0 评论