首页asp.net奔跑加载动画完整代码

asp.net奔跑加载动画完整代码

时间: 2023-08-24 20:09:59 浏览: 103

以下是一个简单的ASP.NET奔跑加载动画的完整代码： ASPX文件： ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #loader { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <form id="form1" runat="server"> <div id="loader"></div> <div>  </div> </form> </body> </html> ``` CSS样式定义了一个圆形加载动画，使用了CSS3的旋转动画。该动画位于页面中央。在HTML文档中，我们嵌入了一个DIV元素来显示这个加载动画。我们还可以在这个DIV元素后面添加其他内容，比如页面内容。当页面加载完成后，加载动画将自动消失。这是一个非常简单的加载动画，但它可以很好地演示如何在ASP.NET中实现加载动画效果。

阅读全文