酷炫html源碼
發布時間: 2025-02-23 02:48:19
1. html是利用什麼來設計交互界面的
HTML是利用js腳本語言來設計交換界面的，具體如下：
javaScript和HTML的交互是通過事件實現的。JavaScript採用非同步事件驅動編程模型，當文檔、瀏覽器、元素或與之相關對象發生特定事情時，瀏覽器會產生事件。如果JavaScript關注特定類型事件，那麼它可以注冊當這類事件發生時要調用的句柄。
有如下的html代碼：
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("點擊確定我吧")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="顯示消息框" />
</body>
</html>
會彈出用戶界面：
2. HTML5+CSS3小實例：酷炫的菱形載入動畫
HTML5+CSS3做一個酷炫的多彩菱形載入動畫，代碼超簡單，一個簡單的動畫，再加一個動畫延遲，搞定。真想不到如此簡單的代碼，可以做出這么好看的loading動畫，兄弟們，可別再說手殘做不出來啦。
效果：
源碼：
<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>菱形載入動畫</title><linkrel="stylesheet"href="../css/17.css"></head><body><divclass="loading"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>body{margin:0;padding:0;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(200deg,#f4efef,#e3eeff);}.loading{width:200px;height:200px;display:grid;/*製作3列的網格容器*/grid-template-columns:repeat(3,1fr);/*設置行與列之間的間隙*/grid-gap:10px;/*對子部分進行編號*//*counter-reset:number;*/transform:rotate(45deg);}.loadingspan{/*自定義屬性*/--c:gray;/*調用var函數使用自定義屬性--c*/background-color:var(--c);position:relative;transform:scale(0);/*執行動畫：動畫時長線性的無線次播放*/animation:blinking2slinearinfinite;/*動畫延遲*/animation-delay:var(--d);}.loadingspan::before{/*設置增量*//*counter-increment:number;*//*將編號賦值到content，這里有助於我們根據編號設置樣式*//*content:counter(number);*/position:absolute;width:100%;height:100%;text-align:center;transform:rotate(-45deg);}.loadingspan:nth-child(7){--c:#F15A5A;--d:0s;}.loadingspan:nth-child(4),.loadingspan:nth-child(8){--c:#F0C419;--d:0.2s;}.loadingspan:nth-child(1),.loadingspan:nth-child(5),.loadingspan:nth-child(9){--c:#4EBA6F;--d:0.4s;}.loadingspan:nth-child(2),.loadingspan:nth-child(6){--c:#2D95BF;--d:0.6s;}.loadingspan:nth-child(3){--c:#955BA5;--d:0.8s;}/*定義動畫縮放*/@keyframesblinking{0%,100%{transform:scale(0);}40%,80%{transform:scale(1);}}原文：https://juejin.cn/post/7096027141111808030熱點內容