CSS知识点3

悠悠 2022-04-12 13:44 286阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS变形基础，CSS3的跨设备支持</title>
    
    <link rel="stylesheet" type="text/css" media="handheld">
    	<style type="text/css">
    	/*CSS的跨设备支持，可以使用@media规则来区别媒体设备，并实现样式表定义：不同的媒体设备有不同的样式表*/
    		@media screen and （min-width:900px){
    			nav{
    				folat:left;
    				width: 50%;
    			}
    		}
    		@media screen and （max-width:600px) and （min-width:600px){
    			nav{
    				folat:left;
    				width: 50%;
    			}
    		}
    		@media screen and （max-width:600px){
    			nav{
    				folat:left;
    				width: 50%;
    			}
    		}
    	/*CSS变形基础*/
    		#div{
    			/*transform变形属性  none不设置元素变形    transform-functions：设置一个或多个变形函数*/
    			/*matrix()矩阵变形，其实就是其它变形的总和，太难，可以被取代，放弃
    			  rotate(角度)旋转 单位是deg 正顺负逆
    			  scale(x,y) 缩放 取值为负数时，翻转  如果y值省略，水平垂直放大倍数相同
    			  translate(x,y) 正右上负左下 如果y省略，垂直方向默认偏移值0
    			  skew(x,y)  正顺负逆   如果y省略，垂直方向默认倾斜值0
    			*/
    			transform:matrix() rotate(30deg) scale(1,1);
    			/*定义变形原点，默认元素对象的中心点*/
    			/*取值left,center,right,百分比,长度值*/
    			transform-origin: center;
    			/*CSS过度效果*/
    			/*transition包含四个子属性 transition-property transition-duration transition-timing-function transition-delay 可以一起也可以分开定义*/
    			/*定义过渡的属性 all所有  none没有  或者选择属性，可以指定多个，逗号隔开,如下，只有transform属性过渡*/
    			transition-property:transform;
    			/*过渡所需要的时间，s或ms  可以指定多个，逗号隔开,*/
    			transition-duration:200ms;
    			/*过渡延迟的时间，s或ms  可以指定多个，逗号隔开  等待200ms后开始过渡效果*/
    			transition-delay:200ms;
    			/*过渡的速度曲线   linear:一直一个速度   ease：慢，快，非常慢  ease-in:慢，越来越快  ease-out：快，越来越慢
    			ease-in-out:开始和结束都很慢  cubic-bezier(n,n,n,n)自定义贝塞尔曲线效果，四个参数大于0小于1*/
    			transition-timing-function:linear;
    			
    			/*CSS3动画设计*/
    			/*动画的实现annimation属性 annimation属性有几个子属性，可以一起定义也可以分开定义 
    			annimation-name  annimation-duration    annimation-timing-function   annimation-delay
    			  annimation-iteration-count   annimation-direction*/
    			/*annimation-name指定动画的名称    none不显示动画默认    可以多个逗号隔开*/
    			animation-name: mymove;
    			/*animation-duration  动画播放的周期时间   默认0无动画*/
    			animation-duration:200ms;
    			/*animation-timing-function动画的速度曲线   linear:一直一个速度   ease：慢，快，非常慢  ease-in:慢，越来越快  ease-out：快，越来越慢 ease-in-out:开始和结束都很慢  cubic-bezier(n,n,n,n)自定义贝塞尔曲线效果，四个参数大于0小于1*/
    			animation-timing-function:ease-in;
    			/*animation-delay  动画播放的延迟时间   默认0无动画*/
    			animation-delay:200ms;
    			/*animation-iteration-count  动画播放的次数   inifinite无限放    数字放几次*/
    			animation-iteration-count:5;
    			/*animation-direction  动画循环播放的方向   normal默认值与关键帧设定方向一致  alternate与关键帧设定方向相反*/
    			animation-direction:200ms;
    			
    			/*CSS渐变设计*/
    			/*线性渐变*/
    			/*基于Webkit内核*/
    			/*                  线性     起始点    结束点       起始点颜色  结束点颜色   添加过渡颜色*/
    			/*起始点和结束点可以是关键字，数值，百分比*/
    			background:gradient(linear,left top,left bottom, from(#f90),to(#0f0),color-stop(50%,blue));
    			
    			/*基于Gecko内核               起始点     渐变角度    各种过渡颜色*/
    			/*起始点可以是关键字，数值，百分比*/
    			background: linear-gradient(left top，30deg, blue,0%,red,50%,green,100%);
    			
    			/*径向渐变*/
    			/*基于Webkit内核*/
    			/*起始点和结束点可以是关键字，数值，百分比*/
    			/*                  径向     圆心   半径    圆心     半径  起始点颜色  结束点颜色   添加过渡颜色*/
    			background:gradient(radial,left top,10,left bottom,100, from(#f90),to(#0f0),color-stop(50%,blue));
    			
    			/*基于Gecko内核*/
    			/*起始点可以是关键字，数值，百分比*/
    			/*                           起始点    角度    类型  轴长度   添加过渡颜色*/
    			/*类型默认ellipse椭圆   circle:圆*/
    			background: radial-gradient(left top，30deg, circle,100,blue,0%,red,50%,green,100%);
    		}
    		/*keyframes规则——关键字动画*/
    		@keyframes mymove{  /*mymove是动画名字*/
    			0%{top:0px;}    /*动画持续时间的百分比*/
    			100%{top:100px;left:60px;}
    		}
    	</style>
    </head>
    
    <body>
    	<div id="div"></div>
    </body>
    </html>