【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)

HTML\CSS 同时被 2 个专栏收录
56 篇文章 0 订阅
239 篇文章 78 订阅

CSS3 常用四个动画(旋转、放大、旋转放大、移动)

在页面设计中,给一些图标或者图片加上一些动画效果,会给人非常舒服的感觉。这里收集了四个常用动画效果,以便不时之需。

转载原文

效果一:360°旋转 修改rotate(旋转度数)

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}

效果二:放大 修改scale(放大的值)

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    -ms-transform:scale(1.2);
}

效果三:旋转放大 修改rotate(旋转度数) scale(放大值)

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.2);
    -moz-transform:rotate(360deg) scale(1.2);
    -o-transform:rotate(360deg) scale(1.2);
    -ms-transform:rotate(360deg) scale(1.2);
}

效果四:上下左右移动 修改translate(x轴,y轴)

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:translate(0,-10px);
    -webkit-transform:translate(0,-10px);
    -moz-transform:translate(0,-10px);
    -o-transform:translate(0,-10px);
    -ms-transform:translate(0,-10px);
}

转载原文地址:http://www.jq-school.com/Show.aspx?id=281

下为我的补充

SCSS改造

这样的代码不利于我们在工作中的使用。这里我强烈推荐大家使用scss来书写css样式。

// 执行动画以及执行时间设定
@mixin dz($time:0.25s){
    -webkit-transition: all $time ease-in-out;
    -moz-transition: all $time ease-in-out;
    -o-transition: all $time ease-in-out;
    -ms-transition: all $time ease-in-out;
    transition: all $time ease-in-out;
}
// 宣传动画调用
@mixin xz($deg:360){
    transform:rotate($deg+deg);
    -webkit-transform:rotate($deg+deg);
    -moz-transform:rotate($deg+deg);
    -o-transform:rotate($deg+deg);
    -ms-transform:rotate($deg+deg);
}
// 放大动画
@minxin fd($s1:1.2){
    transform:scale($s1);
    -webkit-transform:scale($s1);
    -moz-transform:scale($s1);
    -o-transform:scale($s1);
    -ms-transform:scale($s1);
}
// 旋转放大动画
@mixin xzfd($deg:360,$s1:1.2){
    transform:rotate($deg+deg) scale($s1);
    -webkit-transform:rotate($deg+deg) scale($s1);
    -moz-transform:rotate($deg+deg) scale($s1);
    -o-transform:rotate($deg+deg) scale($s1);
    -ms-transform:rotate($deg+deg) scale($s1);
}
// 移动动画
@mixin yd($s1:0,$s2:0){
    transform:translate($s1,$s2);
    -webkit-transform:translate($s1,$s2);
    -moz-transform:translate($s1,$s2);
    -o-transform:translate($s1,$s2);
    -ms-transform:translate($s1,$s2);
} 

使用方法

#somebox{
    @include dz();
    &:hover {
        @include yd(-10px,-10px);
    }
}

更多SCSS使用方法,请百度“SASS”

SASS 是无花括号的纯缩进写法,不利于前端人员熟悉。因此,推出了有花括号版本的SCSS两者的语法是一致的。只是有没有花括号的差别。我们在工作中,一般都使用SCSS来书写CSS,但是,在查找SCSS问题的时候,一般搜索SASS

  • 5
    点赞
  • 0
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值