Three.js 使用WebGL技术给网站添加三维动画特效

Hover over the circles to trigger the 3D animations. 有3个经典三维效果： 1. 旋转 2. 弹跳 3. 阴影

webgl, website

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2294
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    color: #555;
    font-size: 13px;
    text-align: center;
    background: #fff;
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 40px;
}
h1 {
    font-size: 30px;
    margin: 70px auto 20px auto;
}
.features {
    margin: 0 auto;
    width: 900px;
}
.features:after {
    content: '';
    display: table;
    clear: both;
}
.feature {
    width: 300px;
    float: left;
}
.container {
    height: 300px;
    width: 300px;
    position: relative;
}
.container canvas {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.circle {
    height: 200px;
    width: 200px;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: center center;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 0.5s -webkit-transform ease;
}
.text {
    width: 200px;
    font-size: 14px;
    line-height: 21px;
    margin: -40px auto 0 auto;
    color: #808080;
}
h2 {
    color: #555;
    font-size: 21px;
}
h2 span {
    color: #95a5a6;
}
.call-to-action {
    margin-top: 40px;
}
.button {
    background: #95a5a6;
    color: #fff;
    font-weight: 600;
    display: block;
    border-radius: 8px;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    margin: 0 auto;
    width: 300px;
}
.button:hover {
    background: #7f8c8d;
}
#info {
    background: #ecf0f1;
    height: 50px;
    text-align: left;
    line-height: 50px;
    padding-left: 30px;
}
#credits {
    display: inline-block;
    float: right;
    padding-right: 30px;
}
a {
    color: #3498db;
}
a:not(.button):hover {
    color: #2980b9;
}
#shield-container .circle {
    background: #2c96dd;
}
#ball-container .circle {
    background: #f3c600;
}
#ball-container .shadow {
    position: absolute;
    top: 144px;
    left: 45px;
    height: 28px;
    /* Dollar */
    
    width: 111px;
    background: url('/uploads/141201/shadow.png') no-repeat center center;
    opacity: 0.7;
}
#dollar-container .circle {
    background: #1ecd6d;
}

HTML

<h1>Why HTML5 is awesome</h1>

<div class="feature">
        <div id="shield-container" class="container">
            <div class="circle"></div>
        </div>
        <div class="text">
            <h2><span>1.</span> HTML5</h2>
            <p>Techbrood is a leading search engine on technical creatives</p>
        </div>
    </div>

<div class="feature">
        <div id="ball-container" class="container">
            <div class="circle">
                <div class="shadow"></div>
            </div>
        </div>
        <div class="text">
            <h2><span>2.</span>Grid</h2>
            <p>Techbrood is a leading search engine on technical creatives.</p>
        </div>
    </div>

<div class="feature">
        <div id="dollar-container" class="container">
            <div class="circle"></div>
        </div>
        <div class="text">
            <h2><span>3.</span>Profit</h2>
            <p>Techbrood is a leading search engine on technical creatives.</p>
        </div>
    </div>
</div>

Hover over the circles to trigger the 3D animations. 有3个经典三维效果： 1. 旋转 2. 弹跳 3. 阴影

webgl, website

编辑器支持Emmet

快捷键

Hover over the circles to trigger the 3D animations. 有3个经典三维效果： 1. 旋转 2. 弹跳 3. 阴影

webgl, website

WebGL Three.js三维时钟的水中倒影动画特效

WebGL Three.js使用噪音算法实现的3D空间乱流动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：