前端 - css 元素设置了10em和transition，进入后应该有放大效果么?
https://www.youtube.com/watch?v=G685JsiQM3E
这个视频里设置后载入页面就有放大效果.但我这边试了半没有这个效果.差在哪里?mac和windows?
<body> <div class="box"> Hello </div></body><style> .box { font-size: 10em; transition: 2s; }</style>共有4个答案
触发过渡的方式：
1、:hover鼠标悬停触发
2、:active用户单击元素并按住鼠标时触发
3、:focus获得焦点时触发
4、@media触发，符合媒体查询条件时触发
5、js 相关事件触发
看他样子应该没有公布js的细节,我补充了一下,差不多是这样的效果,你可以看看
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Happy New Year 2024 Text Animation Effects on Hover | Html CSS</title> <style> @import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Lato:wght@100;300;400;700;900&family=Oswald:wght@200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=ZCOOL+KuaiLe&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: verdana, "Lato", "Poppins", sans-serif; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background: #262626; background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); background-size: 40px 40px; } .box { position: absolute; cursor: pointer; } .box::before { content: 'Bye Bye'; position: absolute; top: -0.75em; color: #fff; font-size: 2em; width: 100%; text-align: center; transition: 1s; } .box:hover::before { transform: translateY(-100px); opacity: 0; filter: blur(30px); } .box::after { content: 'Happy New Year'; position: absolute; top: -0.75em; left: 0; color: #fff; font-size: 2em; width: 100%; text-align: center; transition: 1s; transform: translateY(100px); opacity: 0; filter: blur(30px); } .box:hover::after { transform: translateY(0px); opacity: 1; filter: blur(0px); } .box span { display: inline-block; color: #fff; font-size: 10em; font-weight: bold; filter: blur(1px); transition: 2s; } .box span:last-child { color: #ff236e; } .box:hover span:last-child { transform: rotate(45deg) translateY(-200px); opacity: 0; filter: blur(30px); } .box span:nth-child(3)::after { content: "4"; position: absolute; color: #1dff4e; transform: rotate(-45deg) translateY(200px); opacity: 0; filter: blur(30px); transition: 2s; } .box:hover span:nth-child(3)::after { transform: rotate(0deg) translateY(0px); opacity: 1; filter: blur(1px); } </style></head><body> <div class="box"> <span>2</span> <span>0</span> <span>2</span> <span>3</span> </div></body><script> setTimeout(() => { document.querySelectorAll("span").forEach(function(element) { console.log(element); element.style.fontSize = "20rem"; }); }, 10);</script></html>
.box { font-size: 10em; transition: 2s; }这个是直接设定了字体大小为 10em，然后加上了 transition 的过渡效果时间。但是并没有做出其他变化。
如果要实现文字大小变化，首先要有一个初始的文字大小，然后在根据某个条件去变化，比如在某个时刻增加一个类名，或者 :hover 的时候改变。
.box { font-size: 10em; transition: 2s; }.box:hover { font-size: 30em;}这样的话，鼠标悬停的时候应该就会有变化了。
你像他那样，把 CSS 写到单独的文件里面，然后使用 link 标签引入，就可以复现了。
另外发现，直接在页面写 style 标签的话，只要触发了对应的样式计算(Recalculate Style)，也是可以的。
<!doctype html><html lang="zh-cn"><body><div class="box"> Hello</div></body><script> const el = document.querySelector('.box'); // 1 getComputedStyle(el).fontSize; // 2 console.log(el.style.fontSize); // 3 console.log(el.offsetHeight);</script><style> .box { font-size: 10em; transition: 2s; }</style></html>
这是一个很好的问题。对于你的CSS，它看起来没什么问题。如果这段CSS在你的网页上不起作用，可能的原因有以下几个：
- 你可能在其他地方使用了重置或者默认的CSS，这些CSS可能覆盖了或者修改了你定义的
.box样式。 - 你可能没有正确地引入CSS文件。请确保你的HTML文件正确地链接到了这个CSS文件。
- 你的浏览器可能没有正确地加载CSS文件。尝试清除浏览器缓存或者重启浏览器看看。
- 你可能在其他地方定义了
.box的样式，并且这些样式优先级更高。在CSS中，如果两个样式冲突，那么后定义的样式将会覆盖先定义的样式。同时，内联样式的优先级最高，然后是ID选择器，然后是类选择器，然后是标签选择器。 - 你的元素可能没有足够的宽度和高度来显示10em的字体大小。你可以尝试给
.box添加一个宽度和高度来看看。 - 如果你的代码运行在一个动态的环境（比如一些JS框架），可能在页面加载时
.box元素还没有完全加载或者被隐藏了。 - 你的浏览器可能不支持CSS过渡效果。你可以尝试在不同的浏览器中运行你的代码来看看。
- 如果你的CSS定义在一个外部样式表中，那可能是外部样式表没有正确加载的原因。你可以在浏览器的开发者工具中查看网络请求，看看是否所有需要的资源都已正确加载。
希望这些信息能帮助你解决问题。如果你还有其他问题，欢迎继续提问。
-
问题内容： 是否存在有关嵌套HTML 和HTML元素的最佳实践？ 经典方式： 要么 问题答案： 从w3开始：标签本身可以位于相关控件之前，之后或周围。 要么 要么 请注意，当表格用于布局时，不能使用第三种技术，标签位于一个单元格中，而其关联的表单字段位于另一个单元格中。 任一有效。我喜欢使用第一个或第二个示例，因为它可以为您提供更多的样式控制。
-
transition-group 包裹的过渡组件，当删除一个元素，同时在这个删除位置上写入多个元素的时候： 元素没有进入动画，直接就是enter-to的末位css 就是图标加入的时候没有从flip-li-enter这个css过渡到.flip-li-enter-to，所以没有动画，同时.flip-li-enter-to这个类名也没有消失，一直在dom上，vue2环境求解啦，谢谢啦 在看文档，appe
-
本文向大家介绍用CSS设置没有子元素的每个 元素的样式，包括了用CSS设置没有子元素的每个 元素的样式的使用技巧和注意事项，需要的朋友参考一下 要为没有子元素的每个<p>元素设置样式，请使用：空选择器t。您可以尝试运行以下代码来实现：空选择器 示例
-
问题内容： 我正在尝试显示mailto链接。CSS有可能吗？ html CSS 问题答案： 带有伪元素的内容不会出现在DOM中，因此，您不能。但是，为什么要使用CSS呢？它不是样式，正确的位置似乎直接在HTML文件上。 如果目标是阻止垃圾邮件，那么我通常使用这段javascript： 拆分邮件以确保它不会在任何文件中显示为电子邮件。
-
本文向大家介绍在不播放动画时为元素设置CSS样式，包括了在不播放动画时为元素设置CSS样式的使用技巧和注意事项，需要的朋友参考一下 不播放动画时，使用animation-fill-mode属性设置元素的样式 示例
-
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长 语法: transition: property duration timing-function delay; 属性： 值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transi