效果cSS3,scale适配缩放,rote旋转,移入移出效果,tweenMax.js动画插件运用"/>
transform,transition运用,动画效果cSS3,scale适配缩放,rote旋转,移入移出效果,tweenMax.js动画插件运用
CSS3 transform 属性
transform 定义动画,向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。
CSS3 transition 属性
transition 定义要执行的css 要变换时间,效果
transition: property duration timing-function delay;
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
运用
鼠标移入,放大
.frame4 .uc a:hover{transform:scale(1.1);z-index: 1;transition: transform .4s;
}
鼠标移入,旋转一圈
.close:hover{transform:rotate(360deg);transition: transform 1s;
}
把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
使用媒体查询 和 transform:scale() 缩放动画,做适配缩放效果
@media (max-width: 1750px){.frame2 .role{transform: scale(.9);} }
@media (max-width: 1540px){.frame2 .role{transform: scale(.8);} .frame3 .frame-con{transform: scale(.9);}.frame4 .peopleWrapper{transform: scale(.8);}
}
@media (max-width: 1360px){.frame2 .role{transform: scale(.7);} .frame3 .frame-con{transform: scale(.8);}.frame4 .peopleWrapper{transform: scale(.75);}
}
jq。使用animate()执行动画
//css
.famre2_swiper{left:258px;opacity:0;
}$('.famre2_swiper').animate({'left':'68px','opacity':'1'
},2000)
tweenMax.js插件
TweenMax.to('.catalogWrapper', .3, {
opacity:1,
top: '1.2rem'
})
更多推荐
transform,transition运用,动画效果cSS3,scale适配缩放,rote旋转,移入移出效果,tweenMax.js动画插件运用
发布评论