酷炫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热点内容