html 写个摇名字代码
以下是一个简单的HTML代码，用于实现一个摇名字的效果：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes shake {
0% { transform: translateX(0); }
10% { transform: translateX(-10px) rotate(-5deg); }
20% { transform: translateX(10px) rotate(5deg); }
30% { transform: translateX(-10px) rotate(-5deg); }
40% { transform: translateX(10px) rotate(5deg); }
50% { transform: translateX(-10px) rotate(-5deg); }
60% { transform: translateX(10px) rotate(5deg); }
70% { transform: translateX(-10px) rotate(-5deg); }
80% { transform: translateX(10px) rotate(5deg); }
90% { transform: translateX(-10px) rotate(-5deg); }
100% { transform: translateX(0) rotate(0); }
}
.shake-name {
animation: shake 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h1 class="shake-name">John Doe</h1>
</body>
</html>
这段代码中，使用了CSS的@keyframes关键字来定义了一个名为shake的动画。该动画会在元素的transform属性上应用一系列变换，从而实现摇动的效果。然后，使用.shake-name类选择器来应用这个动画到指定的元素上。在这个例子中，我们将动画应用到了一个<h1>标签上，并给它添加了shake-name类
原文地址: https://www.cveoy.top/t/topic/iZ4A 著作权归作者所有。请勿转载和采集!