码迷,mamicode.com
首页 > Web开发 > 详细

第九章 利用CSS3制作网页动画

时间:2018-11-09 16:07:08      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:制作   java   放大   利用   设备   near   css3   脚本   ansi   

一.CSS3变形transform
	
	1.平移:translate(x,y)	translateX(x)	translateY(y)		
		
		注意:如果想只向X轴平移那么可以translateX,如果想只向X轴平移那么可以translateY,X和Y不能共存。如果想向两个方向平移,那么使用translate
		
					   y轴
						^	-
						|
						|
						|	
						|
						|
						|
	-	--------------------------------->	+	x轴
						|
						|	
						|
						|
						|
						|	+
	
	2.缩放:	scale(x放大倍数,y放大倍数)		scaleX(x放大倍数)	scaleY(Y放大倍数)
		
		注意:如果想放大那么写大于1的数,如果想缩小,那么写小于1的数
		
	3.倾斜:	skew(x轴倾斜角度,y轴倾斜角度)	skewX(x轴倾斜角度)	skewY(y轴倾斜角度)
	
		注意:x轴为正值按照逆时针x轴为负值按照顺时针,y轴正值为顺时针倾斜,y轴负值为逆时针倾斜
	
	4.旋转:	rotate(旋转角度)	正值为顺时针旋转,负值为逆时针旋转
	
二.CSS3过渡
	
	transition:需要过度的属性 过度时间(s) 过度动画函数 延迟时间(s)
	
		过渡动画函数:
			ease:速度由快到慢(默认值)
			linear:速度恒速(匀速运动)
			ease-in:速度越来越快(渐显效果)
			ease-out:速度越来越慢(渐隐效果)
			ease-in-out:速度先加速再减速(渐显渐隐效果)
			
	img:hover{
            transform: rotate(90deg) scale(1.2);
            transition: all 1s linear 1s;
    }
	
	过渡处罚机制:
		伪类触发
			:hover
			:active
			:focus
			:checked

		媒体查询:通过@media属性判断设备的尺寸,方向等
		JavaScript触发:用JavaScript脚本触发
		
三.CSS3动画

	1.设置关键帧
		@keyframes 关键帧名称{
            0%{
                width: 0;
                transform: scale(1.5);
            }
            33%{
                width: 60px;
                transform: translate(200px,0px) scale(2);
            }
            66%{
                width: 120px;
                transform: translate(300px,0px);
            }
            100%{
                width: 200px;
                transform: translate(400px,0px);
            }
        }
	2.调用关键帧
		animation: 关键帧名称 执行时间 播放方式 延迟时间 播放次数;

  

第九章 利用CSS3制作网页动画

标签:制作   java   放大   利用   设备   near   css3   脚本   ansi   

原文地址:https://www.cnblogs.com/dabrk/p/9934746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!