[已解决]我想知道这个效果是怎么做出来的

isdkz · 发表于 2023-8-8 11:11:43

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

https://fishc.com.cn/thread-232064-1-1.html

这个帖子打开有一个特效，我觉得很神奇，想知道这是怎么做出来的

最佳答案

月排行榜 / 总排行榜

歌者文明清理员

2023-8-8 11:21:41

跳转到最佳答案楼层

学习编程中的Ben · 发表于 2023-8-8 11:12:00

本帖最后由学习编程中的Ben 于 2023-8-8 14:59 编辑

解析网页中的特效

在给定的帖子中，页面上的特效是通过JavaScript和CSS来实现的。主要是通过利用CSS3的@keyframes和animation属性创建动画效果。

特效实现的步骤如下：

1. 页面加载完成后，通过JavaScript获取目标元素（这里是logo元素）。
2. 为目标元素添加一个CSS类名（通常是animate），触发特效。
3. 在CSS文件中，使用@keyframes定义动画的关键帧序列，指定不同时间点的样式变化。
4. 使用animation属性将关键帧序列应用到目标元素上。

以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特效演示</title>
<style>
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate {
animation: rotate 2s linear infinite;
}
</style>
<script>
window.onload = function() {
var logo = document.getElementById('logo');
logo.classList.add('animate');
};
</script>
</head>
<body>
<div id="logo" style="width: 200px; height: 200px; background-color: red;"></div>
</body>
</html>

复制代码

这段代码会在页面加载完成后，自动为id为logo的div元素添加animate类名，触发旋转特效。CSS定义了一个名为rotate的关键帧动画，使元素在2秒内按照线性变化无限循环旋转360度。

你可以新建一个HTML文件，将以上代码复制进去保存，并用浏览器打开该文件，就可以看到类似于帖子中的特效了。

希望这能帮到你，如果有其他问题，请随时提问。

如果回答对你有帮助，请给我一个最佳答案！

Mike_python小 · 发表于 2023-8-8 11:12:01

本帖最后由 Mike_python小于 2023-8-8 08:18 编辑

【非代码部分】

标题：新手乐园帖子中的特效是如何实现的？

帖子中的特效是通过CSS和JavaScript实现的。具体来说，它使用了CSS的@keyframes动画和transform属性，以及JavaScript中的事件监听和DOM操作。

【代码部分】

下面是一个示例代码，展示了如何实现类似的特效效果：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS部分 */
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// JavaScript部分
const box = document.querySelector('.box');
box.addEventListener('click', function() {
box.style.backgroundColor = getRandomColor();
});
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>

复制代码

上述示例代码中，CSS部分定义了一个名为.box的块元素，设置了宽高、背景颜色、位置和动画效果。通过@keyframes定义了名为rotate的动画，从0度旋转到360度，每次循环持续2秒。

HTML部分创建了一个具有.box类的<div>元素，用于展示特效。

JavaScript部分为.box元素添加了点击事件监听，当点击时，通过调用getRandomColor()函数随机生成颜色，并将其设置为.box元素的背景颜色。

你可以将上述代码复制到一个HTML文件中，在浏览器中打开该文件，即可看到类似的特效效果。

请注意，这只是一个简单的示例，实际中的特效可能会更复杂。如果你想了解更多关于CSS和JavaScript的特效实现方法，可以参考相关的教程和文档。

如果回答对你有帮助，请给我一个最佳答案！

陶远航 · 发表于 2023-8-8 11:12:57

稍等，我抓个包看看

isdkz · 发表于 2023-8-8 11:15:26

陶远航发表于 2023-8-8 11:12
稍等，我抓个包看看

感觉好像是起始动画

陶远航 · 发表于 2023-8-8 11:19:00

isdkz 发表于 2023-8-8 11:15
感觉好像是起始动画

有没有可能帖子中使用了html代码？
没试过，不知道

歌者文明清理员 · 发表于 2023-8-8 11:21:41

isdkz · 发表于 2023-8-8 11:21:46

陶远航发表于 2023-8-8 11:19
有没有可能帖子中使用了html代码？
没试过，不知道

我找出来了，估计是这个：

你人工研究过了，那就给你最佳吧

陶远航 · 发表于 2023-8-8 11:22:26

isdkz 发表于 2023-8-8 11:21
我找出来了，估计是这个：

我没有VIP，找不到这个玩意

isdkz · 发表于 2023-8-8 11:22:38

歌者文明清理员发表于 2023-8-8 11:21

尴尬了，刚要说给陶最佳，你就答出来了

陶远航 · 发表于 2023-8-8 11:22:58

isdkz 发表于 2023-8-8 11:22
尴尬了，刚要说给陶最佳，你就答出来了

给他吧

isdkz · 发表于 2023-8-8 11:23:03

陶远航发表于 2023-8-8 11:22
我没有VIP，找不到这个玩意

好吧

isdkz · 发表于 2023-8-8 11:25:28

歌者文明清理员发表于 2023-8-8 11:21

我的Pass你不解了？

isdkz · 发表于 2023-8-8 11:26:16

陶远航发表于 2023-8-8 11:22
给他吧

嗯嗯，你有没有看到我发了个Pass？

陶远航 · 发表于 2023-8-8 11:28:04

isdkz 发表于 2023-8-8 11:26
嗯嗯，你有没有看到我发了个Pass？

我看看

高山 · 发表于 2023-8-8 11:40:47

啊呀，发现敲错了个字

不二如是 · 发表于 2023-8-8 11:44:54

isdkz 发表于 2023-8-8 11:15
感觉好像是起始动画

去掉感觉

isdkz · 发表于 2023-8-8 12:24:48

不二如是发表于 2023-8-8 11:44
去掉感觉

起始动画真是好东西

账号		自动登录	找回密码
密码			立即注册

[已解决]我想知道这个效果是怎么做出来的

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块