htm如何设置动态_在HTM文件中添加动态效果

让我告诉你我欺骗网络的那次经历。
当时我接受了一份创建一个简单的茶叶销售网站的工作。
客户想要一个在鼠标暂停时改变颜色的小按钮。
非常酷。

一开始我想，这个一定要用JS吗？后来我发现我很傻。
使用纯 CSS 创建简单的悬停效果。
你看，我写代码的时候是这样写的：
css 按钮：悬停{ 背景颜色：绿色； 过渡：全部 0.3 s 缓和；
就是这么简单。
您将此 CSS 插入到您的样式中。
当鼠标停放时，按钮的颜色会慢慢变绿，当您离开时，按钮的颜色会慢慢变回来。
这称为过渡效果，这就是过渡的感觉。
我当时就想，这个东西真是太好了，不需要用JS，代码量小，而且速度快。

后来，客户要求有一个“点击展示茶叶介绍”的功能。
这时候就需要用到JS了。
看看我当时写的：
<button onclick=showIntro()">点我看茶叶</button>
<脚本> 函数 showIntro() { var intro = document.getElementById('intro'); if (intro.style.display === '无') { intro.style.display = '块'; } 否则{ intro.style.display = '无'; } } </脚本>
只要欺骗一下，点击按钮，就会出现茶的介绍。
客户非常满意，表示比以前见过的网站“活”多了。

最神奇的事情是什么？后来我创建了一个活动页面，想要创建一个茶叶图像，您可以单击放大然后缩小。
一开始我想用JS，但后来我发现我又犯了一个错误。
后来我挖出了CSS3 的@keyframes，告诉朋友们，看一下这个：
css @关键帧脉冲{ 0% { 变换：缩放（1 ）； } 5 0% { 变换：缩放（1 .2 ）； } 1 00% { 变换：缩放（1 ）； }
茶图片{ 宽度：2 00px； 动画：脉冲1 s无限；
你看，只要你输入这个，图像就会自己“跳”，当你点击它时它可能会停止。
我当时很得意，说，你看，这比JS简单，而且效果还更好。
后来客户说这个网站比他们想象的要好得多，而且还为他们节省了聘请设计师的钱。

所以，要创建一个网站，你并不需要只了解 JS。
CSS 效果很好，有时比 JS 更麻烦。
想想看，用一个干净的 HTML 文件、一些 CSS 和一些简单的 JS，你可以制作一个非常酷的页面。
这就是这么简单。
当年我爬过这些“坑”，现在想起来，还是很有用的。

如何利用html5制作出Loading加载效果

这是旋转加载动画的代码吗？查看 .spinner 和动画的命名，以及那些 .reg 类，很明显存在一个加载循环。

是的，这就是问题所在。
以前也遇到过这种情况。

您正在使用CSS3 的@keyframes和动画属性来创建动画。
简而言之，您创建几个按顺序扩展和收缩的 div 块以创建旋转效果。

.spinner 设置宽度、高度和居中，.reg 类设置背景颜色、高度和宽度。
重要的是动画。

动画的名称是Stretchdelay。
关键帧0%、4 0%、1 00%用于缩小，2 0%用于放大。

在这个项目中，我也使用了同样的旋转加载效果，主要是通过调整延迟和缩放比例来控制动画。

你自己看看，效果会很明显。
如果您想调整速度或效果，可以尝试修改动画时长和过渡比例。

html文件怎么打开有网页效果

直接双击HTML文件，系统默认浏览器将打开它。
适用场景：快速查看静态网页。
如果没有关联，右键单击“打开方式”设置默认浏览器。

将 HTML 拖放到浏览器中，或从“文件”→“打开”菜单中选择一个文件。
适用场景：指定非默认浏览器或者浏览器不自动关联。

在VSCode中拖放HTML，安装LiveServer插件，右键单击“OpenwithLiveServer”。
实时刷新，非常适合调试。
替代方案：在工具中预览。

确保 HTML 路径正确，使用主流浏览器进行测试并安全地打开受信任的文件。