迅闻网
让更多人看到你

css3旋转(html旋转的动画怎么做)

  css3旋转

CSS3为我们提供了很多特性,利于旋转和位移能实现很多的动画,下面介绍一个旋转的demo,当鼠标悬浮到上面时,会停止旋转,离开后继续旋转,以下为效果图:
动图封面
section{
position:relative;
width:300px;
height:200px;
margin:150pxauto;
transform-style:preserve-3d;
animation:move10slinearinfinite;
}
@keyframesmove{
0%{
transform:rotateY(0);
}
100%{
transform:rotateY(360deg);
}
}
sectiondiv:nth-child(1){
transform:rotateY(0)translateZ(300px);
}
sectiondiv:nth-child(2){
transform:rotateY(60deg)translateZ(300px);
}
sectiondiv:nth-child(3){
transform:rotateY(120deg)translateZ(300px);
}
sectiondiv:nth-child(4){
transform:rotateY(180deg)translateZ(300px);
}
sectiondiv:nth-child(5){
transform:rotateY(240deg)translateZ(300px);
}
sectiondiv:nth-child(6){
transform:rotateY(300deg)translateZ(300px);
}

css

html旋转的动画怎么做

运用canvas的convas来完成环绕旋转动画,外圈顺时针,里层逆时针。
代码demo链接地址:代码demo链接地址
html文件
body{
margin:0;
padding:0;
overflow:hidden;
background-color:#f0f0f0;
}
varwidth=window.innerWidth;
varheight=window.innerHeight;
//创立舞台
varstage=newKonva.Stage({
container:”cas”,
width:width,
height:height
});
//创立层
varlayer=newKonva.Layer();
//创立组1
vargroup=newKonva.Group({
x:stage.width()/2,
y:stage.height()/2,
});
//最外层圆
varcircle1=newKonva.Circle({
x:0,
y:0,
radius:250,
stroke:”#ccc”,
strokeWidth:1,
dash:[6,3]
});
group.add(circle1);
//第二个圆
varcircle2=newKonva.Circle({
x:0,
y:0,
radius:150,
stroke:”#ccc”,
strokeWidth:1,
dash:[6,3]
});
group.add(circle2);
//第三个圆
varcircle3=newKonva.Circle({
x:0,
y:0,
radius:135,
stroke:”blue”,
strokeWidth:2,
dash:[10,5]
});
group.add(circle3);
//第四个圆
varcircle4=newKonva.Circle({
x:0,
y:0,
radius:105,
fill:”#ccc”,
opacity:0.4
});
group.add(circle4);
//第五个圆
varcircle5=newKonva.Circle({
x:0,
y:0,
radius:80,
fill:”#74A2F0″
});
group.add(circle5);
//增加文字
vartext=newKonva.Text({
x:-80,
y:-12,
text:”WEB全栈”,
fill:”white”,
fontSize:24,
width:160,
align:”center”
});
group.add(text);
layer.add(group);
//*****************************************************
//创立组2
varoutGroup=newKonva.Group({
x:stage.width()/2,
y:stage.height()/2,
});
vararrColor=[“red”,”green”,”blue”,”orange”,”purple”];
vararrText=[“web”,”node.js”,”ajax”,”html5″,”css”];
for(vari=0;i<5;i++){
varcir=newCircle({
x:250*Math.cos(72*i*Math.PI/180),//圆心x轴的坐标
y:250*Math.sin(72*i*Math.PI/180),//圆心y轴的坐标
outR:60,//外圆的半径
inR:50,//内圆的半径
fill:arrColor[i],//填充色彩
text:arrText[i],//文字
outOpacity:0.3,//外圆的透明度
inOpacity:0.6//内圆的透明度
});
cir.drawCircle(outGroup);
}
layer.add(outGroup);
//***********************************************
//创立组3
varinGroup=newKonva.Group({
x:stage.width()/2,
y:stage.height()/2,
});
vararrColor=[“red”,”green”,”blue”,”orange”,”purple”];
vararrText=[“web”,”node.js”,”ajax”,”html5″,”css”];
for(vari=0;i<5;i++){
varcir=newCircle({
x:135*Math.cos(90*i*Math.PI/180),//圆心x轴的坐标
y:135*Math.sin(90*i*Math.PI/180),//圆心y轴的坐标
outR:45,//外圆的半径
inR:35,//内圆的半径
fill:arrColor[i],//填充色彩
text:arrText[i],//文字
outOpacity:0.3,//外圆的透明度
inOpacity:0.6//内圆的透明度
});
cir.drawCircle(inGroup);
}
layer.add(inGroup);
//************************************************
//运动动画
varstep=1;//转动的角度
varanim=newKonva.Animation(function(){
outGroup.rotate(step);
outGroup.getChildren().each(function(ele,index){
ele.rotate(-step);
});
inGroup.rotate(-step);
inGroup.getChildren().each(function(ele,index){
ele.rotate(step);
});
},layer);
anim.start();
stage.add(layer);
stage.on(“mouseover”,function(){
step=0.3;
});
stage.on(“mouseout”,function(){
step=1;
});
js文件
functionCircle(obj){
this._init(obj);
}
Circle.prototype={
_init:function(obj){
this.x=obj.x,//圆心x轴的坐标
this.y=obj.y,//圆心y轴的坐标
this.outR=obj.outR,//外圆的半径
this.inR=obj.inR,//内圆的半径
this.color=obj.fill,//填充色彩
this.text=obj.text,//内圆的文字
this.outOpacity=obj.outOpacity,//外圆的透明度
this.inOpacity=obj.inOpacity//内圆的透明度
},
drawCircle:function(group){
//创立一个组
vargroupCir=newKonva.Group({
x:this.x,
y:this.y
});
//外圆
varoutCir=newKonva.Circle({
x:0,
y:0,
radius:this.outR,
fill:this.color,
opacity:this.outOpacity
});
groupCir.add(outCir);
//内圆
varinCir=newKonva.Circle({
x:0,
y:0,
radius:this.inR,
fill:this.color,
opacity:this.inOpacity
});
groupCir.add(inCir);
//增加文字
vartext=newKonva.Text({
x:-this.inR,
y:-10,
text:this.text,
fill:”white”,
fontSize:20,
width:2*this.inR,
align:”center”
});
groupCir.add(text);
group.add(groupCir);
}
}

未经允许不得转载:迅闻网 » css3旋转(html旋转的动画怎么做)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页