欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用CSS3动画属性实现各种旋转跳跃

程序员文章站 2022-03-19 17:37:20
...

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同，可直接写数字,正数是顺时针旋转，负数是逆时针旋转。

点此查看实例展示

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew()：

含义：倾斜；

点此查看实例展示

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale()：

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

点此查看实例展示

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate()：

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

点此查看实例展示

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

HTML5 canvas transform() 方法

绘制一个矩形；通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：

JavaScript 语法：

context.transform(a,b,c,d,e,f);
a:水平缩放绘图
b:水平倾斜绘图
c:垂直倾斜绘图
d:垂直缩放绘图
e:水平移动绘图
f:垂直移动绘图

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

亲自试一试

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 transform() 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

画布上的每个对象都拥有一个当前的变换矩阵。

使用CSS3的animation动画属性实现360°无限循环旋转。

代码片段：

<div id="test">

　　<img src="/CSS3/img/yinyue.png" id="change" />   //图片路径自定义

</div>

CSS样式书写如下：

#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}

@-webkit-keyframes change

{

　　0%{-webkit-transform:rotate(0deg);}

　　50%{-webkit-transform:rotate(180deg);}

　　100%{-webkit-transform:rotate(360deg);}

}

 

搞定！！！当然，这里只写了chrome/Safari浏览器的兼容，其它的可再加上：

@-moz-keyframes change{***}  火狐

@-ms-keyframes change{***}  IE

@keyframes change{***}   W3C

Opera浏览器不支持animation属性！！！（我测试了一下，IE不行）

 

加载图片的实现。

先看一下效果图，会提升我们的学习兴趣哟：

 

使用CSS3动画属性实现各种旋转跳跃

第一种效果：

html结构：

<div id="progress">
      <span></span>
</div>

css样式：

#progress{
	width: 50%;
	height: 30px;
	border:1px solid #ccc;
	border-radius: 15px;
	margin: 50px 0 0 100px;
	overflow: hidden;
	box-shadow: 0 0 5px 0px #ddd inset;
}
#progress span {
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #2989d8; /* Old browsers */
	background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */
	background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-size: 60px 30px;
	text-align: center;
	color:#fff;
	-webkit-animation:load 3s ease-in;
}
@-webkit-keyframes load{
	0%{
		width: 0%;
	}
	100%{
		width:100%;
	}
}

可以看到其实这种进度条的动画是最容易实现的，根据具体进度百分比设置默认的width百分比和动画里100%处的width百分比就行了，比如说，我想实现70%的进度条动画效果，那么我只需要修改一下两处地方：

#progress span{
	width: 70%;
}
@-webkit-keyframes load{
	  0%{
		width: 0%;
	  }
	100%{
		width:70%;
	  }
}

第二种效果：

html结构：

<div id="progressBar">
     <!-- 进度条 -->
     <div>
       <span></span>
     </div>
     <!-- 五个圆 -->
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

css样式：

	   #progressBar{
	width: 80%;
	height: 50px;
	position: relative;
	margin: 50px 0 0 100px;
}
#progressBar div{
	width: 100%;
	height: 10px;
	position: absolute;
	top:50%;
	left: 0;
	margin-top:-20px;
	background: #ccc;
}
#progressBar div span{
	position: absolute;
	display: inline-block;
	background: green;
	height: 10px;
	width: 100%;
	-webkit-animation:bgLoad 5.5s linear;
}
@-webkit-keyframes bgLoad{
	0%{
		width: 0%;
	}
	18.18%,27.27%{
		width:25%;
	}
	45.45%,54.54%{
		width: 50%;
	}
	72.72%,81.81%{
		width: 75%;
	}
	100%{
		width:100%;
	}
}
#progressBar>span{
	position: absolute;
	top:0;
	margin-top: -10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ccc;
	margin-left: -20px;
	color:#fff;
}
@-webkit-keyframes circleLoad_1{
	0%,66.66%{
		background: #ccc;
	}
	100%{
		background:green;
	}
}
@-webkit-keyframes circleLoad_2{
	0%,83.34%{
		background: #ccc;
	}
	100%{
		background:green;
	}
}
@-webkit-keyframes circleLoad_3{
	0%,88.88%{
		background: #ccc;
	}
	100%{
		background:green;
	}
}
@-webkit-keyframes circleLoad_4{
	0%,91.67%{
		background: #ccc;
	}
	100%{
		background:green;
	}
}
#progressBar span:nth-child(2){
	left: 0%;background:green;
}
#progressBar span:nth-child(3){
	left: 25%;background:green;
	-webkit-animation:circleLoad_1 1.5s ease-in;
}
#progressBar span:nth-child(4){
	left: 50%;background:green;
	-webkit-animation:circleLoad_2 3s ease-in;
}
#progressBar span:nth-child(5){
	left: 75%;background:green;
	-webkit-animation:circleLoad_3 4.5s ease-in;
}
#progressBar span:nth-child(6){
	left: 100%;background:green;
	-webkit-animation:circleLoad_4 6s ease-in;
}

可以看到，其实对于动画本身是很简单的，一看就明白了， 主要就是动画持续时间的计算 ，由于这个动画效果只执行一次，所以其实也可以用动画延迟时间来保证各个动画在指定的时间点开始执行，但是对于循环或者多次动画效果，延迟很不灵活，所以这里还是用持续时间的长短来控制动画的执行时间。

这个订单进度条，我是设置了走一段用时1秒，然后每到一个圆点就停顿0.5秒，而这0.5秒就是相对应的圆点的动画持续执行时间。但是 再次强调这个是单次动画 ，如果想实现循环动画，还是得做调整的，必须让所有动画的持续执行时间是一样的，不然循环起来就错乱的。而时间的改动也会影响动画关键帧的改动， 下面对第一小段和第二个圆的动画时间讲解一下 ：

首先，细长条的动画持续时间通过计算：

4小段x1秒 + 中间3个圆点 x 0.5秒 = 5.5秒

接下来就是计算细长条动画关键帧的时间分配，设每一份0.5秒，那么共总就是11份，每小段得2份，每个圆点得1份，用100%除以11，可得每份大约是9.09%，接下来就是分配时间了，这个就简单了，不多说。

接着，当细长条完成第一小段的动画效果到达第二个圆点时，会停顿0.5秒，而这0.5秒就是第二个圆点的动画时间，所以第二个圆点的动画持续时间就是：

等待细长条执行完1小段 x１秒＋自身的动画完成时间ｘ０.５秒＝１.５秒

同样的方法计算每一份的时间然后进行分配。 同理，其他动画效果相似，就不再赘述了。

第三种效果：

今天就重点讲解这个效果，首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

使用CSS3动画属性实现各种旋转跳跃

然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：

.circleprogress{
	width: 160px;
	height: 160px;
	border:20px solid red;
	border-left:20px solid transparent;
	border-bottom:20px solid transparent;
	border-radius: 50%;
}

使用CSS3动画属性实现各种旋转跳跃

然后还是会说，这个也不难啦。可是，如果不是刚好都是45度的倍数呢？

OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：

.circleProgress_wrapper{
	width: 200px;
	height: 200px;
	margin: 50px auto;
	position: relative;
	border:1px solid #ddd;
}

使用CSS3动画属性实现各种旋转跳跃

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>
.wrapper{
	width: 100px;
	height: 200px;
	position: absolute;
	top:0;
	overflow: hidden;
}
.right{
	right:0;
}
.left{
	left:0;
}

使用CSS3动画属性实现各种旋转跳跃

这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏，那么当我们去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样我们就可以达到我们想要的效果。

从html结构也已看到，在左右矩形里面还会各自有一个圆形，先讲一下右半圆：

.circleProgress{
	width: 160px;
	height: 160px;
	border:20px solid transparent;
	border-radius: 50%;
	position: absolute;
	top:0;
}
.rightcircle{
	border-top:20px solid green;
	border-right:20px solid green;
	right:0;
}

使用CSS3动画属性实现各种旋转跳跃

可以看到，效果已经出来了，其实本来是一个半圆弧，但由于我们设置了上边框和右边框，所以上边框有一半溢出而被隐藏了，所以我们可以通过旋转得以还原：

.circleProgress{
	width: 160px;
	height: 160px;
	border:20px solid transparent;
	border-radius: 50%;
	position: absolute;
	top:0;
	-webkit-transform: rotate(45deg);
}

使用CSS3动画属性实现各种旋转跳跃

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现，变成一个全圆：

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

使用CSS3动画属性实现各种旋转跳跃

紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转180度，再让左半圆弧旋转180度 ，这样，两个半圆弧由于先后都全部溢出而消失了，所以看起来就是进度条再滚动的效果：

		.rightcircle{
	border-top:20px solid green;
	border-right:20px solid green;
	right:0;
	-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
	border-bottom:20px solid green;
	border-left:20px solid green;
	left:0;
	-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
	0%{
		-webkit-transform: rotate(45deg);
	}
	50%,100%{
		-webkit-transform: rotate(225deg);
	}
}
@-webkit-keyframes circleProgressLoad_left{
	0%,50%{
		-webkit-transform: rotate(45deg);
	}
	100%{
		-webkit-transform: rotate(225deg);
	}
}

使用CSS3动画属性实现各种旋转跳跃

当然，我们只需要调整一下角度就可以实现反向的效果：

		.circleProgress{
	width: 160px;
	height: 160px;
	border:20px solid transparent;
	border-radius: 50%;
	position: absolute;
	top:0;
	-webkit-transform: rotate(-135deg);
}
@-webkit-keyframes circleProgressLoad_right{
	0%{
		-webkit-transform: rotate(-135deg);
	}
	50%,100%{
		-webkit-transform: rotate(45deg);
	}
}
@-webkit-keyframes circleProgressLoad_left{
	0%,50%{
		-webkit-transform: rotate(-135deg);
	}
	100%{
		-webkit-transform: rotate(45deg);
	}
}

使用CSS3动画属性实现各种旋转跳跃

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用360卫士清理垃圾时的类似效果，当然不是很像啦：

		.circleProgress_wrapper{
	width: 200px;
	height: 200px;
	margin: 50px auto;
	position: relative;
	border:1px solid #ddd;
}
.wrapper{
	width: 100px;
	height: 200px;
	position: absolute;
	top:0;
	overflow: hidden;
}
.right{
	right:0;
}
.left{
	left:0;
}
.circleProgress{
	width: 160px;
	height: 160px;
	border:20px solid rgb(232, 232, 12);
	border-radius: 50%;
	position: absolute;
	top:0;
	-webkit-transform: rotate(45deg);
}
.rightcircle{
	border-top:20px solid green;
	border-right:20px solid green;
	right:0;
	-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
	border-bottom:20px solid green;
	border-left:20px solid green;
	left:0;
	-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
	0%{
		border-top:20px solid #ED1A1A;
		border-right:20px solid #ED1A1A;
		-webkit-transform: rotate(45deg);
	}
	50%{
		border-top:20px solid rgb(232, 232, 12);
		border-right:20px solid rgb(232, 232, 12);
		border-left:20px solid rgb(81, 197, 81);
		border-bottom:20px solid rgb(81, 197, 81);
		-webkit-transform: rotate(225deg);
	}
	100%{
		border-left:20px solid green;
		border-bottom:20px solid green;
		-webkit-transform: rotate(225deg);
	}
}
@-webkit-keyframes circleProgressLoad_left{
	0%{
		border-bottom:20px solid #ED1A1A;
		border-left:20px solid #ED1A1A;
		-webkit-transform: rotate(45deg);
	}
	50%{
		border-bottom:20px solid rgb(232, 232, 12);
		border-left:20px solid rgb(232, 232, 12);
		border-top:20px solid rgb(81, 197, 81);
		border-right:20px solid rgb(81, 197, 81);
		-webkit-transform: rotate(45deg);
	}
	100%{
		border-top:20px solid green;
		border-right:20px solid green;
		border-bottom:20px solid green;
		border-left:20px solid green;
		-webkit-transform: rotate(225deg);
	}
}

可以看到，其实就是多了一些改变不同边框颜色的动画而已，这个就给大家自己去实践吧！ 主要还是利用两个矩形来完成这么一个圆形进度条效果，特别注意overflow这条规则，起着关键作用。

 

上一篇： 跟郭德纲学营销推广

下一篇： 汉景帝为什么要册立刘彻？他是什么用意

推荐阅读