css案例（二）

来源：互联网发布：知乎客户端电脑版下载编辑：程序博客网时间：2024/05/18 20:34

-webkit-perspective：景深（像素来表示）

-webkit-transform-style：preserve-3d；（创建一个3D空间）

-webkit-transform-origin：景深基点

-webkit-transform：translateZ（25deg）；（3D空间中的Z轴）

正方体实例：

*{margin:0;padding:0;list-style: none;}.waper{width: 100px;height: 100px;margin: 100px auto;border: 1px solid #000;-webkit-perspective:300px;padding: 100px;-webkit-perspective-origin:center center;}.box{width:100px;height:100px;position: relative;-webkit-transform-style:preserve-3d;-webkit-transition:2s;}.box div{width: 100px;height: 100px;position: absolute;font-size: 30px;line-height: 100px;text-align: center;color: #fff;}.box div:nth-of-type(1){top:-100px;left: 0;-webkit-transform-origin:bottom;background: red;-webkit-transform:rotateX(90deg);}.box div:nth-of-type(2){top:0;left: -100px;-webkit-transform-origin:right;background: yellow;-webkit-transform:rotateY(-90deg);}.box div:nth-of-type(3){top:0;left: 0;-webkit-transform-origin:bottom;background: pink;}.box div:nth-of-type(4){top:0;left: 100px;-webkit-transform-origin:left;background: green;-webkit-transform:rotateY(90deg);}.box div:nth-of-type(5){top:100px;left: 0;-webkit-transform-origin:top;background: blue;-webkit-transform:rotateX(-90deg);}.box div:nth-of-type(6){top:0;left: 0;background: black;-webkit-transform:translateZ(-100px) rotateX(180deg);}.waper:hover .box{-webkit-transform:rotateX(180deg);}

<div class="waper">    <div class="box">        <div>1</div>        <div>2</div>        <div>3</div>        <div>4</div>        <div>5</div>        <div>6</div>    </div></div>

3D轮播图实例：

<style id="css">*{margin:0;padding:0;list-style: none;}.waper{width:800px;margin:100px auto 0;}#picList{width:800px;height: 360px;-webkit-perspective:800px;}#picList li{width: 25px;height: 360px;position: relative;-webkit-transform-style:preserve-3d;-webkit-transform-origin:center center -180px;float: left;transition:1s;}#picList li a{width: 100%;height:100%;position: absolute;left: 0;top:0;}#picList li a:nth-of-type(1){background: url(5img/1.jpg) no-repeat;}#picList li a:nth-of-type(2){background: url(5img/2.jpg) no-repeat;top:-360px;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg);}#picList li a:nth-of-type(3){background: url(5img/3.jpg) no-repeat;-webkit-transform:translateZ(-360px) rotateX(180deg);}#picList li a:nth-of-type(4){background: url(5img/4.jpg) no-repeat;-webkit-transform-origin:top;top:360px;-webkit-transform:rotateX(-90deg);}#picList li span{position: absolute;width: 360px;height: 360px;background: #333;}#picList li span:nth-of-type(1){-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);left: 0;} #picList li span:nth-of-type(2){-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg);right: 0;}#btnList{float: right;padding:20px 0;}#btnList li{width: 20px;height: 20px;background:#000;color: #fff;border-radius: 50%;    font:14px/20px Arial;float: left;text-align: center;margin-left: 10px;}#btnList li.active{background: orange;}</style>

window.onload = function(){    var oPicList = document.getElementById('picList');    var aBtn = document.getElementById('btnList').getElementsByTagName('li');    var oCss = document.getElementById("css");    var sLi = "";    var iLiw = 25;// 设置每个li的宽度    var iCss = "";    var iZindex = 0;// 设计层级    var iLength = oPicList.clientWidth/iLiw;    for(var i=0;i<iLength;i++){        i>iLength/2 ? iZindex-- : iZindex++;// 当i>二分之一li长度时，层级逐减，反之逐增        sLi += ` <li>// 设置每个li，使其变成一个立方体                    <a href="#"></a>                    <a href="#"></a>                    <a href="#"></a>                    <a href="#"></a>                    <span></span>                    <span></span>                </li>`        iCss += '#picList li:nth-of-type('+ (i+1) +') a{background-position:-'+ i*iLiw + 'px 0}';   // 样式的叠加        iCss += '#picList li:nth-of-type('+ (i+1) +'){z-index:'+ iZindex +'}';// 设置层级    }    oPicList.innerHTML = sLi;    oCss.innerHTML += iCss;    var aLi = oPicList.getElementsByTagName('li');// 获取所有的li    for(var i=0;i<aBtn.length;i++){// 循环按钮        aBtn[i].index = i;// 获取当前按钮的索引        aBtn[i].onclick = function(){// 给按钮添加点击事件            for(var j=0;j<aLi.length;j++){// 循环li                aLi[j].style.transition = "0.5s "+ j*30 +"ms";// 设置每个li出现时的时延                aLi[j].style.WebkitTransform = "rotateX(-" + this.index*90 + "deg)";// 设置旋转度数            }            for(var m=0;m<aBtn.length;m++){// 清空每个按钮的class                aBtn[m].className = "";            }            this.className = "active";// 给当前点击的按钮添加class        }    }}

<div class="waper">    <ul id="picList">    </ul>    <ol id="btnList">        <li class="active">1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ol></div>

animation：执行时间延时动画名称执行次数

案例：鼠标移入div时，div停止运动，移出后继续运动（注意要写内核前缀）

@-webkit-keyframes move{      0%{              top:0;left:0;     }    25%{        top:0;left: 200px;    }    50%{        top:200px;left: 200px;      }    75%{       top:200px;left: 0;    }    100%{        top:0;left: 0;    } }.box{width: 300px;height: 300px;border:2px solid #000;position: relative;}.box div{width:100px;height:100px;background: red;position:absolute;top:0;left:0;-webkit-animation:5s move ease infinite}.box:hover div{-webkit-animation-play-state:paused;}   // 播放停止

<div class="box">    <div></div></div>

翻转轮播图案例：

@-webkit-keyframes show{      0%{              -webkit-transform:rotateX(180deg);opacity: 0;    }    70%{        -webkit-transform:rotateX(-8deg);opacity: 1;    }    75%{        -webkit-transform:rotateX(5deg);opacity: 1;    }    80%{        -webkit-transform:rotateX(-6deg);opacity: 1;    }    85%{        -webkit-transform:rotateX(4deg);opacity: 1;    }    90%{        -webkit-transform:rotateX(-5deg);opacity: 1;    }    92%{        -webkit-transform:rotateX(2deg);opacity: 1;    }    94%{        -webkit-transform:rotateX(-3deg);opacity: 1;    }    95%{        -webkit-transform:rotateX(1deg);opacity: 1;    }    100%{        -webkit-transform:rotateX(0deg);opacity: 1;    } }@-webkit-keyframes hidden{      0%{              -webkit-transform:rotateX(0deg);opacity: 1;    }    100%{        -webkit-transform:rotateX(-180deg);opacity: 0;    } }.box{width: 500px;height: 225px;position: relative;margin:100px auto 0;-webkit-perspective:800px;-webkit-transform-style:preserve-3d;}.box span{position: absolute;top:80px;width: 40px;height: 40px;border-radius: 50%;text-align: center;line-height: 40px;font-size: 35px;background: #e6e5e5;color: #fff;}.box span:nth-of-type(1){left: -100px;}.box span:nth-of-type(2){right: -100px;}.box img{width: 500px;height: 225px;position: absolute;left: 0;top: 0;-webkit-transform-origin:bottom;-webkit-transform:rotateX(180deg);opacity: 0;}.box .show{-webkit-transform:rotateX(0deg);opacity: 1;-webkit-animation:0.9s show;}.box .hidden{-webkit-transform:rotateX(-180deg);opacity: 0;-webkit-animation:0.6s hidden;}

window.onload = function(){    var oBox = document.getElementById('box');    var aSpan = oBox.getElementsByTagName('span');    var aImg = oBox.getElementsByTagName('img');    var iNow = 0;    aSpan[1].onclick = function(){        aImg[iNow].className = "hidden";        iNow++;        if(iNow>=aImg.length){            iNow = 0;        }        aImg[iNow].className = "show";    }    aSpan[0].onclick = function(){        aImg[iNow].className = "hidden";        iNow--;        if(iNow<=0){            iNow = aImg.length-1;        }        aImg[iNow].className = "show";    } }

<div class="box" id="box">    <span><</span>    <span>></span>    <img src="7img/1.jpg" class="show">    <img src="7img/2.jpg">    <img src="7img/3.jpg">    <img src="7img/4.jpg"></div>

折纸导航案例：（注意：折纸导航的布局很重要，布局不好，写的时候就会很麻烦）

@-webkit-keyframes show{    0%{ -webkit-transform:rotateX(-120deg);}    25%{ -webkit-transform:rotateX(30deg);}    50%{ -webkit-transform:rotateX(-15deg);}    75%{ -webkit-transform:rotateX(8deg);}    100%{ -webkit-transform:rotateX(0deg);}}@-webkit-keyframes hiden{    0%{ -webkit-transform:rotateX(0deg);}    100%{ -webkit-transform:rotateX(-120deg);}}.box{width:180px;margin:30px auto;position:relative;-webkit-perspective:800px;}.box h3{width:100%;height:35px;background: orange;color: #fff;font:16px/35px '微软雅黑';text-align: center;position: relative;z-index: 100;cursor: pointer;}.box div{position: absolute;top:27px;width: 100%;left: 0;/*-webkit-transform-style:;*/-webkit-transform-origin:top;-webkit-transform:rotateX(-120deg);}.box span{display: block;height: 25px;background: #62e462;font:12px/25px '微软雅黑';text-align: center;color: #fff;box-shadow:inset 0 0 0 20px rgba(0,0,0,0.8); transition:1s;}.box>div{top:35px;}.box .show{-webkit-animation:1.2s show ease-in;-webkit-transform:rotateX(0deg);}.box .show>span{box-shadow:inset 0 0 0 20px rgba(0,0,0,0);}.box .hiden{-webkit-animation:0.5s hiden;-webkit-transform:rotateX(-120deg);}

window.onload = function(){    var oBtn = document.getElementById('btn');    var aDiv = document.getElementById('box').getElementsByTagName('div');    var timer = null;    var iNow = 0;    var bOn = true;    oBtn.onclick = function(){        if(timer){// 如果定时器开启了，就返回            return false;        }        if(bOn){            iNow = 0;            timer = setInterval(showFn,180);         }else{            iNow = aDiv.length-1;            timer = setInterval(hidenFn,120);         }        bOn = !bOn;// 每次执行完，bOn取反    }    function showFn(){        aDiv[iNow].className = "show";        iNow++;        if(iNow>=aDiv.length){            clearInterval(timer);            timer = null;        }    }     function hidenFn(){         console.log(iNow);        aDiv[iNow].className = "hiden";        iNow--;        if(iNow<0){            clearInterval(timer);            timer = null;        }    }}

<div class="box" id="box">    <h3 id="btn">导航指南</h3>    <div>        <span>导航指南一</span>        <div>            <span>导航指南二</span>            <div>                <span>导航指南三</span>                <div>                    <span>导航指南四</span>                    <div>                        <span>导航指南五</span>                        <div>                            <span>导航指南六</span>                            <div>                                <span>导航指南七</span>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </div></div>

阅读全文

0 0