master

分支 (1)

管理

管理

master

tiktok-project
/
special.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/special.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/special.js"></script>
</head>

<body>
    <div class="container">
        <header>
            <div class="header_left">
                <div class="header_logo"></div>
                <a href="#">创作者</a>
                <a href="#">学院</a>
            </div>
            <div class="header_right">
                <a href="#">立即下载</a>
            </div>
        </header>
        <div class="banner">
            <div class="banner_caption">一面艺术，一面技术</div>
            <div class="banner_desc">人人都爱的抖音特效，创作从未如此简单</div>
            <a href="#">下载创作工具</a>
            <video class="special" src="./resource/special.mp4" loop autoplay muted></video>
        </div>
        <div class="intro">
            <div class="intro_title">特效师三大权益</div>
            <div class="intro_desc">成为优质特效师，实现个人价值与艺术梦想！</div>
            <div class="intro_bonus clearfix">
                <div class="bonus_left">
                    <div class="bonus_item01">
                        <img src="./images/item01.jpg" alt="">
                        <div class="bonus_desc">
                            <img src="./images/item01.gif" alt="">
                        </div>
                    </div>
                    <div class="bonus_item02">
                        <img src="./images/item02.jpg" alt="">
                        <div class="bonus_desc">
                            <img src="./images/item02.gif" alt="">
                        </div>
                    </div>
                    <div class="bonus_item03">
                        <img src="./images/item03.jpg" alt="">
                        <div class="bonus_desc">
                            <img src="./images/item03.gif" alt="">
                        </div>
                    </div>
                </div>
                <div class="bonus_right">
                    <div class="info">
                        <h2>现金激励</h2>
                        <p>通过特效使用数据折算收益，获得高额激励</p>
                        <p>更有机会获得500强企业的商业接单，实现商业价值！</p>
                    </div>
                </div>
            </div>
            <div class="intro_users clearfix">
                <div class="user_left clearfix">
                    <div class="info">
                        <h2>海量用户</h2>
                        <p>所创特效将覆盖多平台用户，同步上线抖音、火山等爆款产品</p>
                        <p>将有全球数十亿用户体验你的特效！</p>
                    </div>
                </div>
                <div class="user_right">
                    <video src="./resource/users.mp4" autoplay loop muted></video>
                </div>
            </div>
            <div class="expose">
                <div class="expose_left">
                    <div class="expose_video">
                        <video src="./resource/expose.mp4" autoplay loop muted></video>
                    </div>
                    <div class="expose_img">
                        <img src="./images/expose.png" alt="" class="expose1">
                        <img src="./images/expose2.png" alt="" class="expose2">
                    </div>
                </div>
                <div class="expose_right">
                    <h2>专属曝光</h2>
                    <p>获得官方专属黄V认证，特效页昵称露出，特效栏展示等</p>
                    <p>拥有千万流量曝光，助力粉丝增长，打造个人IP！</p>
                </div>
            </div>
        </div>
        <div class="creator">
            <div class="creator_tools">
                <h2>强大的特效创作工具</h2>
                <div class="desc clearfix">
                    <div class="desc_item">
                        <div class="icon01"></div>
                        <p>丰富的模板和特效库</p>
                    </div>
                    <div class="desc_item">
                        <div class="icon02"></div>
                        <p>丰富的模板和特效库</p>
                    </div>
                    <div class="desc_item">
                        <div class="icon03"></div>
                        <p>丰富的模板和特效库</p>
                    </div>
                </div>
                <div class="creator_video">
                    <video src="./resource/creator.mp4" autoplay loop muted></video>
                </div>
                <a href="#" class="download">立即下载</a>
            </div>
            <div class="creator_authors">
                <h2>满足不同背景创作者的需求</h2>
                <p>无论你是插画师、影视制作、普通艺术爱好者等各种职业，还是初学、掌握2d设计、3d建模等不同技能的创作者都可以轻松上手，释放你的创作力！</p>
                <div class="creator_content">
                    <span class="arr arr_left"></span>
                    <span class="arr arr_right"></span>
                    <div class="creator_ul clearfix">
                        <div class="list">
                            <video src="./resource/list01.mp4" autoplay loop muted></video>
                            <img src="./images/list01.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list02.mp4" autoplay loop muted></video>
                            <img src="./images/list02.jpg" alt="">
                        </div>
                        <div class="list current">
                            <video src="./resource/list03.mp4" autoplay loop muted></video>
                            <img src="./images/list03.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list04.mp4" autoplay loop muted></video>
                            <img src="./images/list04.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list05.mp4" autoplay loop muted></video>
                            <img src="./images/list05.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list06.mp4" autoplay loop muted></video>
                            <img src="./images/list06.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list07.mp4" autoplay loop muted></video>
                            <img src="./images/list07.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list08.mp4" autoplay loop muted></video>
                            <img src="./images/list08.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list09.mp4" autoplay loop muted></video>
                            <img src="./images/list09.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list10.mp4" autoplay loop muted></video>
                            <img src="./images/list10.jpg" alt="">
                        </div>
                        <!-- 加三个做无缝轮播 -->

                        <div class="list">
                            <video src="./resource/list03.mp4" autoplay loop muted></video>
                            <img src="./images/list03.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list02.mp4" autoplay loop muted></video>
                            <img src="./images/list02.jpg" alt="">
                        </div>
                        <div class="list">
                            <video src="./resource/list01.mp4" autoplay loop muted></video>
                            <img src="./images/list01.jpg" alt="">
                        </div>
                    </div>
                </div>
                <a href="#" class="more_creator">更多创作者</a>
            </div>
        </div>
        <div class="step">
            <h1>简单三步完成创建和发布作品</h1>
            <div class="step_first">
                <div class="step01_left clearfix">
                    <img src="./images/effectsite-step-order1.png" alt="">
                    <div class="info">
                        <h2>自由导入素材</h2>
                        <p>参照素材设计规范，将2d/3d软件绘制的原创素材，自由导入Effect Creator，开启创作！</p>
                    </div>
                </div>
                <div class="step01_right">
                    <video src="./resource/effectsite-home-step1.mp4" autoplay loop muted></video>
                </div>
            </div>
            <div class="step_second clearfix">
                <div class="step02_left">
                    <video src="./resource/effectsite-home-step2.mp4" autoplay loop muted></video>
                </div>
                <div class="step02_right clearfix">
                    <img src="./images/effectsite-step-order2.png" alt="">
                    <div class="info">
                        <h2>互动玩法升级</h2>
                        <p>灵活应用多种特效触发逻辑和能力，使素材赋予更多交互可能，完成玩法设定！</p>
                    </div>
                </div>

            </div>
            <div class="step_third">
                <div class="step03_left clearfix">
                    <img src="./images/effectsite-step-order3.png" alt="">
                    <div class="info">
                        <h2>发布推广作品</h2>
                        <p>发布你的作品！提交审核获得专属特效二维码，分享给你的粉丝和朋友，一起记录美好！</p>
                    </div>
                </div>
                <div class="step03_right">
                    <div class="step03_bg">
                        <img src="./images/effectsite-step-bg.png" alt="">
                        <div class="videostep3">
                            <video src="./resource/effectsite-home-step3.mp4" autoplay loop muted></video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home_download">
            <div class="download_text">免费创作，激发灵感，无限可能！</div>
            <a href="#">立即下载</a>
        </div>
        <footer>
            <div class="footer_left">
                <img src="./images/footer.png" alt="">
            </div>
            <div class="footer_center">
                <div class="links">
                    <a href="#">社区公约</a>
                    <span>|</span>
                    <a href="#">用户协议</a>
                    <span>|</span>
                    <a href="#">隐私政策</a>
                    <span>|</span>
                    <a href="#">版权保护</a>
                    <span>|</span>
                    <a href="#">商业化订单</a>
                </div>
                <div class="copyright">
                    <span>@2020 All Rights Reserved.</span>
                    <span>京 ICP 备 16016397 号 -3 |</span>
                    <a href="#">营业执照</a>
                </div>
            </div>
            <div class="footer_right">
                <img src="./images/download.png" alt="">
                <img class="down_hover" src="./images/downloadhover.png" alt="">
            </div>
        </footer>
    </div>
</body>

</html>