css3样式秀

最新推荐文章于 2023-06-22 10:30:00 发布

荣默默

最新推荐文章于 2023-06-22 10:30:00 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/rt2016/article/details/82145714

版权

通过css3展示各种图形，动画效果等，

代码展示如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin-left: 100px;}
			.divRadius {
				border: 90px solid palevioletred;
				border-left: 90px solid transparent;  
				border-top: 90px solid transparent; 
				border-bottom-right-radius: 20px; 
				content: "";  
				position: relative;      
				width: 0;  
				/*利用matrix()方法旋转div元素30°*/
				transform:matrix(0.866,0.5,-0.5,0.866,0,0);
				-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
				-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
			}
			.divRadius:hover{
				transform: scale(1.2);
            	-webkit-transform: scale(1.2);
            	-moz-transform: scale(1.2);
            	-o-transform: scale(1.2);
           	 	-ms-transform: scale(1.2);
			}
			.secondDom{
				display: inline-block;
				height: 150px;
				width: 150px;
				border-radius: 100%;
				background: red;
			}
			
			.windDom{
				width:100px;
				height: 100px;
				border: 100px solid pink;
				border-top: 50px solid coral;
				border-bottom: 50px solid mediumpurple;
				border-left: 50px solid darkgoldenrod;
				border-right: 50px solid darkgrey;
				
				transform: skew(20deg,50deg);
				-ms-transform: skew(20deg,50deg); /* IE 9 */
				-webkit-transform: skew(20deg,50deg); /* Safari and Chrome */
			}
			.windDom:hover{
   		 		transform: rotateY(180deg);
    			-webkit-transform: rotateY(180deg); /* Safari 与 Chrome */

			}
			.minWinDom{
				width:0px;
				height: 0px;
				border: 50px solid ;
				margin: 0px auto;
				vertical-align: middle;
				border-color: red yellowgreen mistyrose blueviolet; 
			}
			/*第二种窗口写法*/
			.windDom2{
				width:100px;
				height: 100px;
				border: 100px solid hotpink;
				border-top: 100px solid orangered;
				border-bottom: 100px solid mediumpurple;
				border-left: 100px solid darkgoldenrod;
				border-right: 100px solid darkgrey;
			}
			
			.windDom2:hover{
			 	transform: rotateX(180deg);
   		 		-webkit-transform: rotateX(180deg); /* Safari 与 Chrome */
			}
			
			/*倒三角*/
			.triangleDom{
				width:0px;
				height: 0px;
				border: 100px solid transparent;
				border-top: 100px solid lightblue;
				border-left: 100px solid lightgreen;
				
			  	-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    			transition: width 2s, height 2s, transform 2s; 
    			
    			animation:triangleDom2 3s;
				-webkit-animation:triangleDom2 3s; /* Safari and Chrome */
			/*	border-bottom: 100px solid transparent;*/
			}
			/*动画效果*/
			@keyframes triangleDom2
			{
			    from {background: orange;}
			    to {background: yellow;}
			}
			 
			@-webkit-keyframes triangleDom2 /* Safari 与 Chrome */
			{
			    from {background: orange;}
			    to {background: yellow;}
			}

			.triangleDom:hover{-ms-transform:scale(1.2,1.2); /* IE 9 */
				-webkit-transform: scale(1.2,1.2); /* Safari */
				transform: scale(1.2,1.2); /* 标准语法 */}
			
			/*三角翻转*/
			.transferTriangleDom{
				width:0px;
				border: 50px solid transparent;
				border-top: 50px solid darkmagenta;
			}
			.transferTriangleDom:hover{
				transform:rotate(270deg);
				-ms-transform: rotate(270deg); /* IE 9 */
				-webkit-transform: rotate(270deg); /* Safari and Chrome */
				
			}
			
		</style>
	</head>
	<body>
		<!--
        	描述：三角形
        -->
    	三角形
		<div class="divRadius"></div>
		<!--
        	描述：圆形
        -->
        <br />
		<div class="secondDom">圆</div>
		<br />
		<!--
        	描述：窗口(中间小窗口)
        -->
        <br />
        <div class="windDom">
        	
        	<div class="minWinDom"></div>
        </div>
		<br />
		<!--
        	描述：窗口(中间小窗口)2
        -->
    	四方窗口
        <div class="windDom2"></div>
		
		<br />
		<!--
        	描述：倒三角形
        -->
    	倒三角
		 <div class="triangleDom"></div>
		<br />
		
		<!--
        	描述：三角形翻转
        -->
    	三角形翻转
        <div class="transferTriangleDom"></div>
        <br />
        
        
	</body>
</html>