sass封装h5适配文件

最新推荐文章于 2024-05-09 16:24:24 发布

Api工程师~

最新推荐文章于 2024-05-09 16:24:24 发布

阅读量147

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_57479235/article/details/118764023

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS的`@keyframes`规则创建动画，并展示了如何通过`@include`混合方法来应用动画和转换。内容涵盖了浏览器前缀处理、过渡和动画的兼容性，以及如何定义和使用关键帧来改变背景图片的位置和大小。

摘要由CSDN通过智能技术生成

@charset "UTF-8";
/**
使用方法
@include keyframes(anMeinv,(
    0%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(165) pxToRem(157)
    ),
    50%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(265) pxToRem(257)
    ),
    75%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(565) pxToRem(657)
    ),
    100%:(
        background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
        background-size: pxToRem(465) pxToRem(557)
    )
));
@include animation(anMeinv 2s ease-out forwards);

*/

$browserPrefix:('-webkit-','-moz-','-ms-','-o-','');
@mixin transition($obj){
    @each $i in $browserPrefix{
        #{$i}transition:$obj;
    }
}
@mixin transform($obj){
    @each $i in $browserPrefix{
        #{$i}transform:$obj;
    }
}
@mixin animation($obj){
    @each $i in $browserPrefix{
        #{$i}animation:$obj;
    }
}
@mixin keyframes($name,$obj){
    @-webkit-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-moz-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-ms-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @-o-keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$val2 in $val{
                    #{$j}:$val2;
                }
            }
        }
    }
    @keyframes #{$name}{
        @each $i,$val in $obj{
            #{$i}{
                @each $j,$v in $val{
                    #{$j}:$v;
                }
            }
        }
    }
}