网页项目里的收获
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>