e媒网络

一切皆可能 e媒网络 http://www.eMay.net

博客园 首页 新随笔 联系 订阅 管理
<!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">&nbsp;西&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</body>
</html>
 
第三方动画库:
https://blog-static.cnblogs.com/files/exesoft/animate.min.css

航空母舰照片
https://blog-static.cnblogs.com/files/exesoft/aircraft-carrier.gif
 
下方的动画效果通过刷新页面可查看:
 
陕 西 航 天 大 学
posted on 2020-06-11 10:53  e媒网络技术团队  阅读(232)  评论(0编辑  收藏  举报