实现思路:自上而下分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>
01-01
662
05-20
2202
05-06
12-29
1056