HTML+css实操(二)小红心

HTML+css实操(二)

一颗小红心:
CSS3中常用的属性:

         	/*倒圆角指令*/
			border-radius: 100px;
			/* 左上右下   右上左下 */
			/*border-radius:10px  60px;*/
			
			/*border-radius:10px 20px 30px 40px;*/
  
      
           /*旋转角度*/
			transform: rotate(45deg);
			/*放大的倍数*/
			/*transform: scale(1.3);*/
			/* X:水平的位移   Y  :垂直的位移  负数:上*/
		    /*transform: translate(0px,-5px);*/
		    /*2D角度的旋转  X  Y*/
		     transform: skew(40deg,45deg);

           /*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
			 box-shadow: 0px 0px 70px #D5093C;
			 
			 
			CSS3中的动画标签 
			 @-ms-keyframes name{
			from{}
			to{}
		}
		
		@-ms-keyframes name{
			0%{}
			
			50%{}

			100%{}

下面附上代码:


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<style>
			
			body{
				
				background-color: #ffa5a5;
				
			}
			
			
			.cen{
				
				width: 200px;
			
				height: 200px;
				
				background-color: #d5093c;
				
				/*阴影   水平方向的偏移  垂直方向的偏移  模糊度 阴影的颜色*/
				 box-shadow: 0px 0px 70px #D5093C;
				 /*执行动画的调用*/
				 animation: 1s aj infinite;
				
				
			}
			
			.lef{
				
				
				/*倒圆角指令*/
				border-radius: 100px;
				/* 左上右下   右上左下 */
				/*border-radius:10px  60px;*/
				
				/*border-radius:10px 20px 30px 40px;*/
				
				position: absolute;
				
				top: 200px;
				
				left: 200px;
				
				
				
			}
			
			.rig{
				
				border-radius: 100px;
				
				position: absolute;
				
				top: 200px;
				
				left: 341px;
			}
			
			.c{
				/*旋转角度*/
				transform: rotate(45deg);
				
				position: absolute;
				
				top: 269px;
				
				left: 271px;
				
			
			}
		
			/*CSS3中的动画*/
			
			@keyframes aj{
				
                 0%{transform: scale(1)rotate(45deg);}
                 
                 50%{transform: scale(1.1)rotate(45deg);}
                 
                 100%{transform: scale(1)rotate(45deg);}
                 
			}
			
			@-moz-keyframes name{
				from{}
				to{}
			}
			
			
			@-ms-keyframes name{
				from{}
				to{}
			}
			@-webkit-keyframes name{
				from{}
				to{}
			}
		style>
		
		
	head>
	<body>
		
		
		<div class="cen lef" >div>
		
		<div class="cen c">div>
		
		<div class="cen rig">div>
	body>
html>

你可能感兴趣的:(网页设计加实操,html,css,css3)