jQuery css3仿星球大战字幕3D引导页动画特效



161 640 214



特效描述:jQuery css3 仿星球大战字幕 3D引导页动画,引导页动画,字幕3D动画特效。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="css/starwar.css" />

2. 引入JS

<script src="js/jquery-2.1.3.min.js"></script>
<script src="dist/sweetalert.min.js"></script>

3. HTML代码

    <!--instruction-->
    <center><em style="color:rgba(255,255,255,0.3);font-size:2px;font-style:normal">点击任意位置进入首页!</em></center>
    <!--Click to jump-->
    <script>
        document.onclick = redirect;
        function redirect() {
            swal({
                    title: "通知",
                    text: "是否进入首页?",
                    //type: "info",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                },
                function() {
                    setTimeout(window.location.href = '#', 1);
                });
        }
    </script>
    <!--Blue font before all start-->
    <div style="overflow:hidden; position:absolute; left:0; top:0; width:50px; height:25px;"></div>
    <p id="start">A long time ago in a galaxy far,<br/> far away&hellip;</p>
    <!--title-->
    <h1>STAR WARS<sub>Simulation</sub></h1>
    <div id="titles">
        <div id="titlecontent">
            <!--subtitle-->
            <p class="center">EPISODE III<br /> Lorem ipsum dolor</p>
            <!--article-->
            <p style="text-indent : 1em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit, tortor non eleifend scelerisque, arcu ex lobortis massa, id pretium sem magna id mi. Donec sed purus quam. In sed nisl porttitor augue mattis condimentum eget at
                nibh. Cras vitae vestibulum augue. Maecenas vitae erat nisi. In vel tempus lacus, eget maximus est. Duis id interdum ligula. Sed purus odio, aliquam eu porttitor vel, tincidunt sed metus. Duis tristique id dui blandit vehicula.</p>
            <p style="text-indent : 1em">Quisque ac arcu porta, iaculis libero sit amet, consequat leo. Duis bibendum, neque ac vestibulum tincidunt, dui nulla posuere erat, ut iaculis mi erat ac orci. Vestibulum est velit, imperdiet vel risus vel, luctus dignissim mi. Maecenas justo
                turpis, pulvinar id ultricies vitae, convallis in purus. Etiam eu faucibus lacus. Maecenas sit amet imperdiet urna. Curabitur sit amet gravida dui. Sed id elit at lacus egestas lacinia vitae ac enim. In hac habitasse platea dictumst. Aenean
                ut tellus mauris. Praesent justo erat, porta vel imperdiet at, tempus ac augue. Ut ac mauris eget felis vulputate interdum ac et turpis. Suspendisse maximus dictum libero a placerat.</p>
            <p style="text-indent : 1em">Phasellus sed venenatis nunc, eu ultricies magna. Integer nec tortor vitae elit fermentum venenatis. Sed sollicitudin eros nec orci eleifend convallis. Aliquam tristique risus neque, id condimentum eros placerat et. Pellentesque interdum tincidunt
                mauris in elementum. Sed varius dui quis elit molestie, non aliquet erat vestibulum. Cras fermentum tortor ut velit convallis luctus. Curabitur enim purus, aliquet ut dignissim sed, viverra in purus. Donec luctus vitae est sit amet ornare&hellip;</p>
        </div>
    </div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 文字 彩色文字 文字列表 html5弹窗动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到