炉石战记游戏CSS3动画测试

Hearthstone CSS3 Animation Test

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    text-align: center;
}
@-webkit-keyframes Smash {
    0% {
        transform: translate3d(0px, 0px, 0px) rotateX(0deg);
    }
    38% {
        transform: translate3d(0px, -14px, 230px) rotateX(20deg);
    }
    40% {
        transform: translate3d(0px, -10px, 240px) rotateX(-10deg);
    }
    46% {
        transform: translate3d(0px, 400px, 10px) rotateX(-28deg);
    }
    58% {
        transform: translate3d(0px, -10px, 50px) rotateX(-4deg);
    }
    62% {
        transform: translate3d(0px, -10px, 50px);
    }
    78% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(0px, 0, 0);
    }
}
.Smash {
    animation-name: Smash;
    animation-duration: 3s;
    animation-fill-mode: both;
}
#container {
    perspective: 700;
    perspective-origin: 50% 50%;
    height: 100px;
    width: 100px;
    padding: 20px;
    margin: 0 auto;
}
#box {
    height: 148px;
    width: 100px;
    background: url('http://hydra-media.cursecdn.com/hearthstone.gamepedia.com/thumb/5/5c/Garrosh_Hellscream-f.png/250px-Garrosh_Hellscream-f.png?version=a3871db3340c521300d7e3deb968b1ba') no-repeat top center;
    background-size: cover;
    transform-style: preserve-3d;
    transition: all 0.6s ease;
}

HTML

Hearthstone CSS3 Animation Test

编辑器支持Emmet

快捷键

Hearthstone CSS3 Animation Test

纯CSS实现的3D绿洲游戏场景动画

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字