关注
分享
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型，并写出一些心得技巧，感谢关注~~~
展开
-
蜘蛛网页设计悬停（Spider web design-hover）
网页设计悬停（web design-hover）示例代码HTMLCSSJS更多有趣示例 尽在 小红砖社区示例代码HTML<div> <background> <i></i> <i></i> <i></i> <i></i> ...原创 2020-04-10 13:57:28 · 332 阅读 · 0 评论 -
雪花玻璃球（Snow Globe）
雪花玻璃球示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<div class="snow-globe"> <div class="globe-wrapper"> <div class="globe"> <div class="globe-inner"> <div class="snow-storm"></div> <div class="tree"> <span c原创 2020-05-12 16:42:26 · 432 阅读 · 0 评论 -
Not A Gengar（耿鬼）
Not A Gengar（耿鬼）示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTMLmain input(type="checkbox" id="ditto-me") label(for="ditto-me") span .gengar .ear.left .ear.right .hair .hair.two .hand .hand.two .mouth .eye.one .eye.two .legCSSbody { background: #fff; font-family: "原创 2020-06-04 16:25:48 · 228 阅读 · 0 评论 -
星球大战尤达（Baby Yoda）
Baby Yoda示例HTMLCSS示例HTML<div class="wrapper"> <div class="circle"> <div class="inner-circle"> <div class="bottom-border"></div> <div class="chest...原创 2019-12-27 10:50:45 · 672 阅读 · 0 评论 -
使用视频作为正方体的纹理（Video cube）
使用视频作为正方体的纹理示例HTMLCSSJS示例HTML<!-- My scene --><canvas id="scene"></canvas><!-- Video used as texture --><video controls crossOrigin="Anonymous" muted autoplay playsin...原创 2019-12-27 14:39:27 · 319 阅读 · 0 评论 -
尤达宝宝（baby yoda）
baby yoda示例HTMLCSS更多有趣示例 尽在小红砖社区示例HTML<div class="baby-yoda"></div>CSS:root { --green: #B7CA81; --green: #A0D6A1; --pink: #D08791;}html { background: linear-gradient(to bottom right, #DDE8E2AA, #DDD9C5AA); }.baby-yoda { w原创 2020-09-24 13:50:38 · 575 阅读 · 0 评论 -
互动河马按钮（interactive hippo button）
互动河马按钮（interactive hippo button）示例HTMLCSSJS更多有趣示例 尽在小红砖社区示例HTML<button> <svg viewBox="0 0 242 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g class="ears"> <g class="ear-left">原创 2020-10-09 11:29:47 · 195 阅读 · 0 评论 -
Are These Birds?
Are These Birds?示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<div class="container"> <css-doodle grid="6"> :doodle { @size: 100vmax; grid-gap: 2%; background-color: black; } background-color: #994FB3; border-radius: 50%;原创 2021-03-15 16:14:00 · 167 阅读 · 0 评论 -
绿巨人（Hulk - Pure CSS）
绿巨人（Hulk - Pure CSS）示例HTMLCSS更多有趣示例 尽在知屋安砖社区示例HTML<input type="checkbox" id="gradient" checked="checked"><label for="gradient"></label><div class="hulk"> <div class="hair"> <div class="lock"></div>原创 2021-03-15 16:07:39 · 2129 阅读 · 0 评论 -
奔跑的长颈鹿（Giraffe Cut-out GSAP runner）
奔跑的长颈鹿（Giraffe Cut-out GSAP runner）示例HTMLCSSJS更多有趣示例 尽在知屋安砖社区示例HTML<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 707 1000" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">原创 2021-03-15 15:35:07 · 226 阅读 · 2 评论 -
骷髅（skeleton）
骷髅示例CSSJS示例CSScanvas { width: 100%; height: 100%; }body { margin: 0; background: #000000;}JS// Skull mesh by DGordillo http://www.blendswap.com/blends/view/4792var renderer,...原创 2020-03-30 11:14:58 · 295 阅读 · 0 评论 -
变形马（horse）
变形马示例HTMLCSSJS示例HTML<div id="container"></div><div class="tips">This demo is using the threejs-geometry-modifiers <a href="https://github.com/a-jie/threejs-geometry-modifiers...原创 2020-03-04 16:09:30 · 410 阅读 · 0 评论 -
机器人与狗（robot & dog）
机器人与狗示例HTMLCSSJS示例HTML<div id="room" /><div id="info"> <h1>ROBOT<br>+PUPPY</h1> <h2> the good stuff is in <a href="https://s3.amazonaws.com/robotpup...原创 2020-03-04 16:04:17 · 978 阅读 · 0 评论 -
转运锦鲤（Transport of Koi Carp）
转运锦鲤示例HTMLCSS示例HTML.container .fish .fish__body .spot .spot .spot .spot .eye.left .eye.right .fish__transparent .snout .upperfin .fin.left .fin.right .tail .tail-left...原创 2020-03-04 15:57:51 · 299 阅读 · 0 评论 -
邦戈猫代码（Bongo Cat Codes）
邦戈猫代码示例HTMLCSSJS示例HTML.content .container svg#bongo-cat(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewBox='0 0 787.3 433.8') defs symbol#e...原创 2020-03-04 15:53:52 · 3480 阅读 · 0 评论 -
偏执 VS 害羞的鸟（birds）
偏执 VS 害羞的鸟示例HTMLCSSJS示例HTML<div id="world"></div><div id="instructions">^<br/>Move the head of this bird<br/><span class="lightInstructions">and watch how the ...原创 2020-03-04 15:35:12 · 252 阅读 · 0 评论 -
猫VS羊毛球（cat VS ball）
猫 VS 羊毛球示例HTMLCSSJS示例HTML<div id="world"/><div id="credits"> <p><a href="http://babeltheking.com" target="blank">Babel the king</a> | <a href="https://codepen.i...原创 2020-03-04 15:28:26 · 699 阅读 · 0 评论 -
卡通鱼（cartoon fish）
卡通鱼示例HTMLCSSJS示例HTML<div id="world"></div><div id="instructions">Move your mouse <br/>to change speed and direction</div><div id="credits"> <p> <a...原创 2020-03-04 15:23:06 · 612 阅读 · 0 评论 -
卡通牛（Cartoon cattle）
卡通牛示例HTMLcssJS示例HTML<div id="world"></div><div id="instructions">Press and drag <br><span class="lightInstructions">to rotate the scene</span></div><...原创 2020-03-04 15:18:23 · 707 阅读 · 0 评论 -
蜜蜂（bee）
蜜蜂示例HTMLCSS示例HTML<body id="js-touch"> <div id="world"></div> <div class="txt"> <header class="header"> <h1 class="title"> Wizbii...原创 2019-12-27 10:01:28 · 210 阅读 · 0 评论 -
飞翔的小鸟（bird）
飞翔的小鸟示例HTMLCSSJS示例HTML<script src="http://threejs.org/build/three.min.js"></script><script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script><di...原创 2019-12-26 16:35:45 · 517 阅读 · 0 评论 -
打喷嚏的龙（dargon）
打喷嚏的龙示例HTMLCSSJS示例HTML<div id="world"></div><div id="instructions">The longer you keep clicking, the harder he sneezes<br/><span class="lightInstructions">- Press an...原创 2019-12-26 11:33:00 · 617 阅读 · 0 评论 -
蝴蝶飞舞（butterfly）
蝴蝶示例HTMLCSSJS示例HTML.p-summary h1 Butterfly p a(href="https://ykob.github.io/sketch-threejs/sketch/butterfly.html", target="_blank") |this source.canvas(id="canvas-webgl", class="p...原创 2019-12-26 11:11:10 · 1496 阅读 · 0 评论 -
可爱的狮子（lion）
狮子示例HTMLCSSJS示例HTML<div id="world"></div><div id="instructions">Press and drag to make wind<br/><span class="lightInstructions">the lion will surely appreciate</s...原创 2019-12-26 10:58:41 · 363 阅读 · 0 评论 -
乌鸦与树（crow）
乌鸦crow示例HTMLCSSJS示例HTML<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script src="https://d3js.org/d3.v4.min.js"></script><script src="https://th...原创 2019-12-26 10:42:46 · 312 阅读 · 0 评论 -
放屁的犀牛（farting rhino）
犀牛示例HTMLCSSJS示例HTML<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 567.32"> <ellipse id="shadow" cx="271.09" cy="401.98" rx="124.49" ry="15" opacity=".07" fill="#231f20"/>...原创 2019-12-25 18:01:51 · 482 阅读 · 0 评论 -
落日海鸥（Seagulls）
落日海鸥示例HTMLCSS示例HTML.world .sunset .sun .bg - for (i = 0; i < 6; i++) .wave .sea .sky .horizon .line.-left .line.-right - for (i = 0; i < 20; i++) ...原创 2019-12-25 17:33:20 · 314 阅读 · 0 评论 -
套娃的小熊（Russian Dolls）
组合的小熊案例htmlcss案例htmlmixin bear()svg(viewbox = '0 0 300 550'preserveaspectratio = 'xMinYMin')g# layer14(inkscape: groupmode = 'layer'inkscape: label = 'Body'transform = 'translate(-0.17695185,...原创 2019-12-25 16:45:19 · 389 阅读 · 0 评论