![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
页面布置
文章平均质量分 64
通过css+js+html做成三维模型之页面布置,展现三维页面布置效果
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
气球滑块(Balloon Slider)
气球滑块(Balloon Slider)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="slider"></div><!-- dribbble --><a class="dribbble" href="https://dribbble.com/shots/7515563-Balloon-Slider" target="_blank"><img src="https://cdn.dribbble.com/as原创 2020-07-14 17:12:43 · 229 阅读 · 0 评论 -
Audio Viz+Acid
Audio Viz+Acid示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML <input type="file" id="thefile" accept="audio/*" /> <audio id="audio" controls></audio><script id="vertex" type="x-shader/x-fragment"> #define PI 3.14159265358979323846 u原创 2020-07-14 18:06:54 · 139 阅读 · 0 评论 -
材质2.0底部工具栏运动设计与交互(material 2.0 bottom toolbar motion design & interaction)
材质2.0底部工具栏运动设计与交互material 2.0 bottom toolbar motion design & interaction示例HTML更多有趣示例 尽在小红砖社区示例HTML<div class="sc-bottom-bar"> <a class="sc-menu-item"> <i class="fas fa-list"></i> </a> <a clas原创 2020-07-21 10:57:36 · 219 阅读 · 2 评论 -
A matter of gravity
A matter of gravity示例HTML更多有趣示例 尽在小红砖社区示例HTML<!-- arrow describing a clockwise rotation --><svg style="display: none;" viewBox="0 0 100 100" width="200" height="200"> <g id="arrow-right" stroke="currentColor" stroke-width="10" stro原创 2020-07-21 11:04:39 · 142 阅读 · 0 评论 -
流动景观
流动景观示例cssJS更多有趣示例 尽在小红砖社区示例cssbody { background: #808080; padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden;}canvas { margin: 0; padding: 0;}JS/** OMG this is old - im ashamed I wrote code like this */// Render原创 2020-08-03 14:25:33 · 173 阅读 · 0 评论 -
背景颜色格式设置
背景格式设置示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); }</script><script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_原创 2020-08-03 14:35:35 · 166 阅读 · 0 评论 -
轮廓文本阴影(outlined text shadow with fallback)
轮廓文本阴影 (outlined text shadow with fallback)示例HTMLCSS更多有趣示例 尽在知屋安砖社区示例HTML<h1>知屋安砖</h1> CSSbody { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}h原创 2021-04-09 15:29:53 · 201 阅读 · 0 评论 -
烟圈(smoke ring)
烟圈(smoke ring)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div class="app"><canvas id="c"></canvas><svg id="s" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" stroke="#fff" fill="none"> <原创 2021-04-16 15:10:17 · 1263 阅读 · 0 评论 -
趣味搜索框(Bouncy Castle Form)
趣味搜索框(Bouncy Castle Form)示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div id="wrap"><form id="bounce" autocomplete="off"><input type="email" id="email" maxlength='25' required/><input type="submit" id="submit" value="SIGN UP"/></for原创 2021-04-16 15:28:47 · 375 阅读 · 0 评论 -
趋势图(stacked area chart composition)
stacked area chart composition示例HTMLJS更多有趣示例 尽在小红砖社区示例HTML<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.h原创 2020-07-08 15:05:23 · 315 阅读 · 0 评论 -
螺旋生成器(Spiral Generator)
螺旋生成器(Spiral Generator)示例HTMLCSSJS示例HTML<!-- --------------------Vortex generatar--------------------- --><canvas id="canvas"></canvas>CSSbody { margin: 0; height: 100v...原创 2019-12-27 14:29:28 · 481 阅读 · 0 评论 -
热力分布圆盘(Thermodynamic diagram)
热力分布圆盘示例HTMLCSSJS示例HTML<canvas class="js-canvas"></canvas>CSShtml,body { margin: 0; padding: 0;}body { overflow: hidden; width: 100vw; height: 100vh; display: f...原创 2019-12-30 09:17:13 · 278 阅读 · 0 评论 -
全球演示
全球演示示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="world"> <div class="world-bg"></div> <div class="world-globe"> <div class="world-globe-pole"></div> <div class="world-globe-doms-container"&g原创 2020-09-15 10:39:35 · 164 阅读 · 0 评论 -
3D波动点网
3D波动点网示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<a href="https://github.com/gnauhca/F3.js" target="_blank">view code on github</a><div class="controls"> <div class="functions btn-group"></div> <div class="rotate btn-group"&g原创 2020-08-21 15:20:11 · 163 阅读 · 0 评论 -
礼物卡动效
礼物卡动效示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="wrap"> <!--main container--> <div class="gift-card-box"> <!--white area which holda the card & UI--> <div class="confirmation"> <!--section only seen after card is原创 2020-08-21 14:51:50 · 293 阅读 · 0 评论 -
用户登入界面
用户登入界面示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="wrapper" id="app"> <div class="card-form"> <div class="card-list"> <div class="card-item" v-bind:class="{ '-active' : isCardFlipped }"> <div class=原创 2020-08-21 14:28:15 · 250 阅读 · 0 评论 -
跨多行下划线动画(Multi-line spanning animated underline)
跨多行下划线动画Multi-line spanning animated underline示例HTMLCSSMulti-line spanning animated underline)更多有趣示例 尽在小红砖社区示例HTML<h2>This is a multi-line spanning animated underline. This took an annoyingly long time to figure out.</h2>CSS@import ur原创 2020-08-10 11:42:14 · 154 阅读 · 0 评论 -
分子移动
分子移动示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body></body>CSSbody { margin: 0px; overflow: hidden; }JS/* * Copyright MIT © <2013> <Francesco Trillini> * * Permission is hereby granted, free of charge, to any perso原创 2020-09-11 11:17:06 · 160 阅读 · 0 评论 -
绝地悍将
绝地悍将示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="dir" id="dir">test</div> <div class="status" id="status"><h2>You Be Dead</h2>Press Space To Continue</div><div class="status" id="GameOver"><h2>Game Ove原创 2020-06-30 16:55:02 · 182 阅读 · 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, 1.0原创 2020-06-30 16:33:07 · 166 阅读 · 0 评论 -
粒子空间(particle position)
变形空间(Plastic space)示例CSSJS更多有趣示例 尽在小红砖社区示例CSSbody {background-color: #000000; margin: 0px; overflow: hidden;}JSvar camera, scene, renderer, mouseX = 0, mouseY = 0, particles = []; var color = '#D2691E'; var particlesLimit = 1000; var particle原创 2020-06-19 14:37:30 · 1892 阅读 · 0 评论 -
树生成器V2
树生成器V2示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="controls"> <button id="generate" class="btn btn-secondary" onclick="generateTree()">New Tree</button><br><br> <button id="saveOBJ" class="btn btn-secondary" onclick="ex原创 2020-08-14 16:54:33 · 175 阅读 · 0 评论 -
Strange Tubes
旋转球体示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body class="text-center"> <div id="page"> <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead"> <div> <h3 class="原创 2020-09-11 11:31:06 · 116 阅读 · 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, 1.原创 2020-09-15 11:00:58 · 143 阅读 · 0 评论 -
radiation vibe
radiation vibe示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body> <canvas id="canvas"></canvas></body>CSSbody { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; display:flex; align-item原创 2020-06-04 17:00:39 · 256 阅读 · 0 评论 -
纹理绘制
纹理绘制示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<p class="f"><a target="_blank" href="http://www.jeremieboulay.fr">@Jeremboo</a><br />┗|`O´|┛</p><a href="https://www.npmjs.com/package/threejs-texture-tool">Threejs-texture-tool原创 2020-08-21 14:56:31 · 351 阅读 · 0 评论 -
使用WASD键移动对象
使用WASD键移动对象示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<body> <h1>use WASD to move the cube</h1> <div class="three"></div></body>CSSthree{ width: 800px; height: 800px; background: grey;}JS// https://threejs.org原创 2020-08-21 15:25:44 · 812 阅读 · 0 评论 -
图书馆搜索动效
图书馆搜索动效示例CSS更多有趣示例 尽在小红砖社区示例CSS// as seen on a.singlediv.com// helpersbook-height(height) linear-gradient(to bottom, #111 height, transparent height)book-grey(start,end) linear-gradient(to right, transparent start, #222 start,原创 2020-08-21 14:00:11 · 98 阅读 · 0 评论 -
团块实验
团块实验示例更多有趣示例 尽在小红砖社区示例原创 2020-08-14 17:15:11 · 209 阅读 · 0 评论 -
下载按钮效果
下载按钮效果示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="container"> <a href="" class="button"> <ul> <li>Download</li> <li>Downloading</li> <li>Op原创 2020-08-21 13:56:48 · 209 阅读 · 2 评论 -
点击按钮(click the button)
点击按钮示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div id="app"></div>CSShtml { font-size: 18px; @media (min-width: 900px) { font-size: 24px; }}body { font-family: 'Montserrat', sans-serif; font-weight: 300; line-height: 1.45;原创 2020-08-21 14:06:29 · 2763 阅读 · 0 评论 -
项目符号日记/草图样式元素(bullet journal/sketch style elements)
@[toc](项目符号日记/草图样式元素(bullet journal/sketch style elements))更多有趣示例 尽在小红砖社区示例HTMLmain section.traced-header h1(data-splitting="items") | Just Bullet Journal Things section.titles .normal-header h1 Sample Title .circled-header h1(原创 2020-08-10 11:13:33 · 326 阅读 · 0 评论 -
按钮(click button)
按钮示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTMLp Drag to rotate the button!<br>Press it in when you need it!small.info Created with ThreeJS, ThreeCSG<br>(wo any 3d model)small.credits a(href="http://www.amazon.com/Gemmy-32651-The-Official-Button/dp/B原创 2020-08-10 11:16:57 · 1500 阅读 · 0 评论 -
3DAudio
3DAudio示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<!-- Only Loads an MP3 file right now, so won't work in browsers that lack the mp3 codec. Click the canvas to pause / play music.--><div class="information"> <div class="item">原创 2020-08-10 11:21:47 · 384 阅读 · 0 评论 -
下拉菜单(dropdowns)
下拉菜单dropdowns示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="container"> <div class="dropdown-wrapper"> <button type="button" class="active" data-dropdown-toggle="dropdown-list">Features</button> <div id="dropdown-list"原创 2020-08-10 11:32:39 · 743 阅读 · 0 评论 -
button hover
button hover示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTML<div class="buttons"> <div class="container"> <h1>歪みエフェクト</h1> <p>Distortion Effect</p> <a href="https://twitter.com/masuwa1018" class="btn effect04" d原创 2020-07-08 13:43:13 · 316 阅读 · 0 评论 -
字母三角形(AlphabetTriangle)
字母三角形(AlphabetTriangle)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<html lang="en"><head> <title>AlphabetTriangle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale原创 2020-07-14 17:07:16 · 1669 阅读 · 0 评论 -
Wire Typo
Wire Typo示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML#canvas-wrapper(aria-label='wire')CSSbody { height: 100vh; background-color: #212121; // black background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(46,46,46,1) 0%, rgba(0,0,0,1) 100%); margin: 0;原创 2020-07-14 17:20:35 · 154 阅读 · 0 评论 -
裁切平面(clipping plane)
裁切平面(clipping plane)示例HTML更多有趣示例 尽在小红砖社区示例HTML<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - clipIntersection</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid原创 2020-07-14 18:00:26 · 2475 阅读 · 0 评论 -
糖果点击器(candy clicker)
糖果点击器(candy clicker)示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="treat-wrapper"> <button class="treat-button">Treats!</button></div><a href="https://youtu.be/8HJU-rQerQ8" target="_blank" data-keyframers-credit style="colo原创 2020-05-12 16:26:21 · 421 阅读 · 0 评论