CSS3 带重力加速度效应的旋转天线

CSS3 Gravity Falls Antenna 天线旋转时模拟重力加速度效应。

CSS3,重力

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
body,
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Alfa Slab One', cursive;
}
body {
    overflow: hidden;
}
#backPhoto {
    background-image: url('/uploads/160301/s1.jpg');
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-repeat: no-repeat;
}
#perspective {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: calc(50% - 150px);
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
}
@keyframes moveIt {
    0% {
        transform: rotateZ(0deg);
    }
    35% {
        transform: rotateZ(-90deg);
    }
    55% {
        transform: rotateZ(-180deg);
    }
    75% {
        transform: rotateZ(-270deg);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}
@-webkit-keyframes moveIt {
    0% {
        transform: rotateZ(0deg);
    }
    35% {
        transform: rotateZ(-90deg);
    }
    55% {
        transform: rotateZ(-180deg);
    }
    75% {
        transform: rotateZ(-270deg);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}
@keyframes moveLetter {
    0% {
        transform: rotateZ(0deg) skewX(20deg);
    }
    35% {
        transform: rotateZ(90deg) skewX(20deg);
    }
    55% {
        transform: rotateZ(180deg) skewX(20deg);
    }
    75% {
        transform: rotateZ(270deg) skewX(20deg);
    }
    100% {
        transform: rotateZ(360deg) skewX(20deg);
    }
}
@-webkit-keyframes moveLetter {
    0% {
        transform: rotateZ(0deg) skewX(20deg);
    }
    35% {
        transform: rotateZ(90deg) skewX(20deg);
    }
    55% {
        transform: rotateZ(180deg) skewX(20deg);
    }
    75% {
        transform: rotateZ(270deg) skewX(20deg);
    }
    100% {
        transform: rotateZ(360deg) skewX(20deg);
    }
}
#container {
    height: 100%;
    width: 100%;
    -webkit-animation-name: moveIt;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: moveIt;
    animation-duration: 3s;
}
#downline {
    position: absolute;
    left: 50%;
    top: 50px;
    background-color: black;
    width: 3px;
    z-index: 2;
    bottom: 0;
    min-height: 200px;
}
.letter {
    border: 10px;
    position: absolute;
    font-size: 50px;
    -webkit-animation-name: moveLetter;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-name: moveLetter;
    animation-duration: 3s;
}
#mid {
    font-size: 150px;
    text-align: center;
}
.line {
    border: 0;
    background-color: black;
    height: 1px;
    position: absolute;
    top: 150px;
    left: 13px;
    right: 13px;
}
#vertical {
    left: 25px;
    right: 25px;
    transform: rotateZ(90deg);
}
#top {
    top: 0;
    left: 135px;
}
#left {
    left: 0;
    top: 125px;
}
#right {
    right: 0;
    top: 125px;
}
#bottom {
    bottom: 0;
    left: 135px;
}

HTML

CSS3 Gravity Falls Antenna 天线旋转时模拟重力加速度效应。

CSS3,重力

编辑器支持Emmet

快捷键

CSS3 Gravity Falls Antenna 天线旋转时模拟重力加速度效应。

CSS3,重力

CSS3 多个不同颜色位置重叠的圆圈错位旋转加载动效

CSS3 不同速度的点点顺时针旋转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：