实现思路:自上而下分2个标签实现,图片本身动画和父类动画相结合 <template> <div class="wrap-block"> <div class="logo-info"> <img src="~@/assets/2.jpg"> </div> </div> </template> <style scoped> .wrap-block{ background: rgba(0,0,0,.3); width: 100%; height: 100vh; } .logo-info { display: inline-block; overflow: hidden; animation: logowrap 2s linear; width: 300px; height: 300px; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; } .logo-info>img { animation: logo 2s linear; max-height: 150px; max-width: 150px; } @keyframes logowrap { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes logo { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } </style>
05-06
04-07
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
12-29
1362
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-14
7501
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交