<!doctype html> <html> <head> <meta charset="utf-8"> <title>Text Box Demo</title> <link rel="stylesheet" type="text/css" href="animate.min.css"> <style type="text/css"> .mybg{ height:200px; border:1px solid blue; background-image:url(aircraft-carrier.gif); background-size:100% 100%; } .mytext{ line-height:100px; text-align:center; margin:48px; color:white; height:100px; background-color:rgba(0,0,255,0.5); border:2px solid blue; font-size: 3em; } </style> </head> <body> <div class="mybg"> <div class="mytext animated fadeInDown">陕 西 航 天 大 学</div> </div> </body> </html>
第三方动画库:
https://blog-static.cnblogs.com/files/exesoft/animate.min.css
https://blog-static.cnblogs.com/files/exesoft/animate.min.css
航空母舰照片
https://blog-static.cnblogs.com/files/exesoft/aircraft-carrier.gif
下方的动画效果通过刷新页面可查看:
陕 西 航 天 大 学