HTML5 AngularJS以图腾命盘为主设计的创意网站

TTNG.net Scrolling Site with Angular.js and CSS3，嵌套旋转轮动画通过多个带圆形背景图案的DIV旋转变换来实现。很棒的一个滚动交互设计。

angular, css3, wheel

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
}
/* Local Variables + Mix-Ins */

.centerAll {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
/* Main Styles */

body {
    background: #EDEEE8;
    overflow-x: hidden;
}
.wheel {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}
.bg {
    background: url(/uploads/1705/wheelbg.png);
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
}
.backdrop {
    z-index: 1;
    background: url(/uploads/1705/wheelbd.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.first {
    background: url(/uploads/1705/wheel001.png);
    z-index: 5;
    background-position: center;
    background-repeat: no-repeat;
}
.second {
    background: url(/uploads/1705/wheel002.png);
    z-index: 4;
    background-position: center;
    background-repeat: no-repeat;
}
.third {
    background: url(/uploads/1705/wheel003.png);
    z-index: 3;
    background-position: center;
    background-repeat: no-repeat;
}
.fourth {
    background: url(/uploads/1705/wheel004.png);
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
}
.bg,
.first,
.second,
.third,
.fourth,
.backdrop {
    background-size: contain;
}
#right-side,
#left-side {
    height: 100vh;
    width: 25vw;
    position: fixed;
    z-index: 999;
}
#right-side {
    right: 0;
}
.announce {
    height: 40%;
    width: 75%;
    background-color: black;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 3.5vh;
}
.announce-content {
    width: 100%;
    height: 100%;
}
#left-side .announce-item {
    display: block;
    height: 33.33%;
    position: relative;
    text-align: center;
    line-height: 1;
}
#right-side .announce-item {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    webkit-transform: translateY(-50%);
}
.announce-item i {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-75%);
}
.announce-item a {
    color: rgba(255, 255, 255, 0.75);
}
.announce-item i:hover {
    color: white;
}
.site {
    text-align: center;
    font-family: 'Lato', 'Helvetica';
}
.site a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
    position: relative;
    top: 75%;
}
.site a:hover {
    color: white;
}
.curtain {
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 999;
    position: fixed;
}
.curtain span {
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 0.75);
    font-size: 5vh;
    font-family: 'Lato', 'Helvetica';
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    text-align: center;
}
.curtain span:hover {
    color: white;
}
@media screen and (max-width: 640px) {
    .announce {
        width: 100%;
    }
}

HTML

</div>
                </div>
                <div class="wheel backdrop" data-0="transform:rotate(0deg)" data-10000="transform:rotate(0deg)">

</div>
            </div>
            <div class="wheel first" data-0="transform:rotate(0deg)" data-10000="transform:rotate(0deg)">

</div>
            <div class="wheel second" data-0="transform:rotate(0deg)" data-10000="transform:rotate(360deg)">

</div>
            <div class="wheel third" data-0="transform:rotate(0deg)" data-10000="transform:rotate(-180deg)">

</div>
            <div class="wheel fourth" data-0="transform:rotate(0deg)" data-10000="transform:rotate(90deg)">
            </div>
        </div>
    </div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js'></script>

TTNG.net Scrolling Site with Angular.js and CSS3，嵌套旋转轮动画通过多个带圆形背景图案的DIV旋转变换来实现。很棒的一个滚动交互设计。

angular, css3, wheel

编辑器支持Emmet

快捷键

TTNG.net Scrolling Site with Angular.js and CSS3，嵌套旋转轮动画通过多个带圆形背景图案的DIV旋转变换来实现。很棒的一个滚动交互设计。

angular, css3, wheel

AngularJS 密码显示或隐藏的切换指令

使用AngularJS实现的数学加减乘除可视化计算器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：