1.CSS3中的3D转换
<style type="text/css">*{margin:0 auto;padding:0;}#a01{width:270px;height:270px;position:absolute;top:300px;left:500px;transition:3s; /*旋转时的间隔时间*/perspective:200px; /*规定透视效果*/transform-style:preserve-3d;}#a01:hover{transform:rotateY(180deg); /*transform:定义的是转换类型，应用的是3D转换。绕y轴旋转，360度转。 */}#a02{width:270px;height:270px;position:absolute;transform-style:preserve-3d;background-position:center;background-repeat:no-repeat;background-image:url(../Pictures/%E6%A0%A1%E5%BE%BD.jpg); ?/*后面的图片*/background-size:250px 250px;transform-origin:left;/*改变被转换元素的位置*/}#a03{width:270px;height:270px;position:absolute;background-image:url(../Pictures/%E6%96%87%E9%9D%A9.jpg); ?/*最前面的图片*/background-position:center;background-repeat:no-repeat;transform-style:preserve-3d;background-size:250px 250px;left:0px;transform:translateZ(0.5px); ?/* 在z轴的方向，正值的话就是在最上边，负值的话就在最后边*/}</style><body><div id="a01"> ???<div id="a02"></div> ???<div id="a03"></div></div></body>2.CSS3中的文本效果，
::before 和 ::after 两个伪元素中添加阴影效果
出现如图效果：
<style > ????#tu { ???position: relative; ???-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); ???-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); ???box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); ???padding: ?10px; ???background:#FC6;}/* Make the image fit the box */#tu img { ???width: 100%; ???border: 3px solid #FBF3E2; ???border-style: inset;}#tu::after { ???content: ‘‘; ???position: absolute; ???z-index: -1; /* hide shadow behind image */ ???-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); ???-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); ???box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); ???width: 70%; ???left: 15%; /* one half of the remaining 30% */ ???height: 100px; ???bottom: 0;} ???</style><body> ?????????????????<div id="tu"> ???????????????????????????????????????<img src="../图片/滚动1.jpg" width="750" height="315" /> ???????????????????????????????????????</div></body> ???????????????3.出现如下图的效果,点哪个框,那个框的背景色会变成白色,字体颜色变红,同时,最上方会有一个红色的线.
???<body> ???<div id="new"> ???????????????????????????<div class="new-lan" style="background-color:#999;color:#666;" onclick="Dian(‘0‘)" >New ???????????????????????????????</div> ???????????????????????????????<div class="new-lan" onclick="Dian(‘1‘)" ?style="background-color:#999;color:#666;">书讯</div> ???????????????????????????????????????????????????????????????<div class="new-lan" onclick="Dian(‘2‘)" ?style="background-color:#999;color:#666;" >少儿 ???????????????????????????????</div> ???????????????????????????????<div class="new-lan" onclick="Dian(‘3‘)" ?style="background-color:#999;color:#666;">小说</div> ???????????????????????????????<div class="new-lan" ?onclick="Dian(‘4‘)"style="background-color:#999;color:#666;">财经</div> ???????????????????????????????<div class="new-lan" onclick="Dian(‘5‘)" ?style="background-color:#999;color:#666;">活动</div> ???????????????????????????</div> ????</body> ???????<script type = "text-javascript"> ????????function Dian(a){ var x = document.getElementsByClassName("new-mu");for( var i=0;i< x.length;i++){ x[i].style.display = "none";}x[a].style.display = "block";var y = document.getElementsByClassName("new-lan") ?/*为了改变背景色,字体颜色,添加上边的框的颜色*/for( var j=0;j<y.length;j++){ y[j].style.backgroundColor = "#999";y[j].style.borderTop="4px solid #999";y[j].style.color = "#666";}y[a].style.borderTop="4px solid #C00";y[a].style.backgroundColor = "#FFF";y[a].style.color = "#C00";} ???????</script>4.轮播想要实现的效果,不移上鼠标时,是一个小框在轮播,变颜色,随着图片的轮播,框也变颜色,移上,会出来一个大框,移出,又变成一个小框,效果如下图所示
移上之后
<body> ??<div id="bo"> ???????????????<img ?class="tu" src="../图片/90.jpg" style="display:block;"/> ???????????????<img ??class="tu" src="../图片/90 2.jpg"/> ???????????????<img class="tu" src="../图片/90 3.jpg" /> ???????????????<img class="tu" src="../图片/90 4.jpg"/><div id="lan7" onmouseout="Chu()"> ???????????????????<div class="k" style="background-color:#F60;" onmouseover="Dian(‘0‘)" > ????????????????????????????快节奏的生活 ?慢一些 放空心灵 ????????????????????????????</div> ???????????????????<div class="k" onmouseover="Dian(‘1‘)" >美好青春 书写不一样的人生</div> ???????????????????<div class="k" onmouseover="Dian(‘2‘)" >每个人心中都有一个暗兽</div> ???????????????????<div class="k" style="width:262px; height:50px;" onmouseover="Dian(‘3‘)" >游戏背后的历史故事</div> ????????????????????????</div> ???????????????????????????????????????????<div id="lan8" onmousemove="Zai()"> ???????????????????????????????????????????????????????????????????????????????????<div class="k2" style="background-color:#F60;" > ?????????????????????????????????????????????????????????</div> ???????????????????<div class="k2" ></div> ???????????????????<div class="k2" ></div> ???????????????????<div class="k2" style="width:262px; height:5px;" ????????????????????????????></div> ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????</div> ?????????????????????????????????????????????????????????</div></body><script type="text/javascript" src="../JS语言/90后特效.js"> ????var sy = 0; /* 定了一个索引值的变量*/ ???????window.setInterval("Lun()",5000); /*间隔是4秒出来一次图片*/ ???????function Lun() ?/*赋这个函数，是让图片来轮播*/ ???????{ ???????????????????????????var tu = document.getElementsByClassName("tu"); ???????????sy++; ?// sy加1 ????????????????????????if(sy>=tu.length) //当sy那个索引值大于等于图片的总长度时，图片轮回到第一张图片 ???????????{ ????????????????sy = 0; ???????????} ???????????//让图片循环显示，循环隐藏 ???????????for( var i=0;i<tu.length;i++) ???????????{ ????????????????tu[i].style.display = "none"; ???????????} ????????????????????????tu[sy].style.display = "block"; ????????????????????????//框随着图片的轮播，变成蓝色。 ???????????var k = document.getElementsByClassName("k"); ???????????for( var j=0;j<k.length;j++) ???????????{ ????????????????k[j].style.backgroundColor = "#666"; ???????????} ???????????k[sy].style.backgroundColor = "#FF8C00"; ???????} ???????//点哪个框，变蓝色，而且换成哪个图片 ???????function Dian(a) ???????{ ??????????????sy = a; ????//a是形参，连着点击框，框里索引着图片 ???????????var tu = document.getElementsByClassName("tu"); ???????????for( var i=0;i<tu.length;i++) ???????????{ ????????????????tu[i].style.display = "none"; ??// 图片循环显示，循环隐藏 ???????????} ????????????????????????tu[a].style.display = "block"; ???????????var k = document.getElementsByClassName("k"); ??//框里的颜色循环变颜色 ???????????for( var j=0;j<k.length;j++) ???????????{ ????????????????k[j].style.backgroundColor = "#666"; ???????????} ???????????k[a].style.backgroundColor = "#FF8C00"; ????????????????}/*轮播的演变*/function Zai(){ var g = document.getElementById("lan7");g.style.display = "block";var h = document.getElementById("lan8");h.style.display = "none";}function Chu(){ var lan8 = document.getElementById("lan8");lan8.style.display = "block";var lan7 = document.getElementById("lan7");lan7.style.display = "none";}/*小框的演变*/ window.setInterval("Kuan()",5000);function Kuan(){ ????????????????????????/* 框随着图片的轮播，变成蓝色。*/ ???????????var k2 = document.getElementsByClassName("k2"); ???????????for( var f=0;f<k2.length;f++) ???????????{ ????????????????k2[f].style.backgroundColor = "#666"; ???????????} ???????????k2[sy].style.backgroundColor = "#FF8C00";}</script>网页项目里的收获
原文地址：http://www.cnblogs.com/zuo72/p/7808625.html