网页项目里的收获

Posted 左剃头

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页项目里的收获相关的知识,希望对你有一定的参考价值。

    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>

 

以上是关于网页项目里的收获的主要内容,如果未能解决你的问题,请参考以下文章

预览 GitHub 项目里的网页

微信小程序代码片段

十个html5代码片段,超实用,一定要收藏

web前端开发JQuery常用实例代码片段(50个)

HTML代码片段

HTML代码片段