您好,欢迎访问一九零五行业门户网

基于jquery和svg实现超炫酷的动画特效_jquery

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图:
实现的代码。
html代码:
复制代码 代码如下:
replay
            slow motion
            reverse
css代码:
复制代码 代码如下:
#intro
        {
            height: 100vh;
            width: 50%;
            margin: 0 auto;
            overflow: hidden;
        }
        #intro #ihtlogo
        {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 50%;
            transform: translate(-50%, -70%);
        }
        #intro #ihttext
        {
            width: 100%;
            position: absolute;
            top: 50%;
            width: 40%;
            left: 50%;
            transform: translate(-50%, 80%);
        }
        .buttons
        {
            position: absolute;
            bottom: 20px;
            left: 20px;
            list-style: none;
            margin: 0;
            padding: 0;
            right: 20px;
        }
        .button
        {
            float: left;
            margin-right: 10px;
            padding: 10px 15px;
            border: 1px #ebebeb solid;
            text-decoration: none;
            color: #222222;
        }
其它类似信息

推荐信息