找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3幻灯片3D切换特效（可查看源文件）

2019-01-27 分类：CSS 阅读(1239) 评论(0)
前端页面开发流程
前端开发页面优化方法
前端页面分层开发流程

html 代码

<!DOCTYPE html>
    <head>
        <title>CSS3幻灯片3D切换特效</title>
        <meta name=”keywords” content=”css3动画, html5特效, 网页特效” />
        <script src=”http://cdn.w3cfuns.com/resource/js/jquery-1.10.2.min.js”></script>
        <style>
            #box {
                width: 700px;
                height: 455px;
                background: url(images/bfanye0.jpg) no-repeat;
                margin: 50px auto;
                position: relative;
                perspective: 1200px;
                font-family: ‘microsoft yahei’;
            }
            #box .pag1 {
                width: 50%;
                height: 100%;
                position: absolute;
                top: 0;
                right: 0;
                transform-style: preserve-3d;
                transistion: 1s all ease;
                z-index: 2;
                transform-origin: left center;
            }
            #box .pag1 span {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .front {
                background: url(images/bfanye0.jpg) no-repeat right top;
                transform: translateZ(1.1px);
            }
            .back {
                background: url(images/bfanye1.jpg) no-repeat left top;
                transform: translateZ(-1.1px) scale(-1, 1);
            }
            .pag2 {
                width: 50%;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                background: url(images/bfanye1.jpg) no-repeat right top;
                z-index: 1;
            }
        </style>
        <script src=”jquery-1.11.0.js”></script>
        <script>
            $(function() {
                var oBox = document.getElementById(‘box’)
                var oPag = document.querySelector(‘#box .pag1’)
                var oFront = document.querySelector(‘#box .pag1 .front’)
                var oBack = document.querySelector(‘#box .pag1 .back’)
                var oPag2 = document.querySelector(‘#box .pag2’)
                var iNow = 0
                var bReady = true
                oBox.onclick = function() {
                    if (bReady == false) return
                    bReady = false
                    iNow++
                    oPag.style.transition = ‘1s all ease’
                    oPag.style.transform = ‘rotateY(-180deg)’
                    oPag.addEventListener(
                        ‘transitionend’,
                        function() {
                            oPag.style.transition = ‘none’
                            oPag.style.transform = ‘rotateY(0deg)’
                            oFront.style.backgroundImage = oBox.style.backgroundImage =
                                ‘url(images/bfanye’ + (iNow % 4) + ‘.jpg)’ //4有几张banner就%几
                            oBack.style.backgroundImage = oPag2.style.backgroundImage =
                                ‘url(images/bfanye’ + ((iNow + 1) % 4) + ‘.jpg)’
                            bReady = true
                        },
                        false,
                    )
                }
            })
            setInterval(function() {
                $(‘#box’).trigger(‘click’)
            }, 2000)
            $(function() {
                $(‘.btn’).click(function() {
                    $(‘#box’).fadeToggle()
                })
            })
        </script>
    </head>
    <body>
        <div style=”text-align:center; padding-top:40px”>
            CSS3幻灯片3D切换特效
        </div>
        <div id=”box”>
            <div class=”pag1″>
                <span class=”front”></span> <span class=”back”></span>
            </div>
            <div class=”pag2″></div>
        </div>
    </body>
</html>
前端页面开发规范
前端开发 制作动态页面
前端开发圣诞主题页面
赞(0)
前端开发者 » 前端开发CSS3幻灯片3D切换特效（可查看源文件）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论