首页 > 移动平台 > 详细

css3 放大加移动效果

时间:2020-05-21 16:58:21      阅读:63      评论:0      收藏:0      [点我收藏+]

本来用的transform: translateZ(600px) translateY(-180px);但iPhoneX版本13.4.1的机型不兼容,改成用scale实现了

.in{
            animation: doorin 3s linear forwards;
            -webkit-animation: doorin 3s linear forwards;
        }
        @keyframes doorin{
            0%{
                transform: none;
            }
            100%{
                transform: translateY(-520px) scale(3.3);
                /* transform: translateZ(600px) translateY(-180px); */
            }
        }
        @-webkit-keyframes doorin{
            0%{
                -webkit-transform: none;
            }
            100%{
                -webkit-transform: translateY(-520px) scale(3.3);
            }
        }
        @-moz-keyframes doorin{
            0%{
                -moz-transform: none;
            }
            100%{
                -moz-transform: translateY(-520px) scale(3.3);
            }
        }
        @-o-keyframes doorin{
            0%{
                -o-transform: none;
            }
            100%{
                -o-transform: translateY(-520px) scale(3.3);
            }
        }
        @-ms-keyframes doorin{
            0%{
                -ms-transform: none;
            }
            100%{
                -ms-transform: translateY(-520px) scale(3.3);
            }
        }

 

css3 放大加移动效果

原文:https://www.cnblogs.com/duanzhenzhen/p/12931575.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!