用js实现标题旋转动画,标题分4个内容,分别是利润,营收,资产和负债
时间: 2024-03-12 21:44:20 浏览: 20
这里提供一种思路,可以通过JavaScript动态地更改标题内容,并结合CSS3的`transform`属性实现标题旋转动画效果。
HTML代码:
```html
<h1 id="title">利润</h1>
```
CSS代码:
```css
#title {
width: 200px;
height: 50px;
margin: 0 auto;
text-align: center;
background-color: #f00;
font-size: 36px;
line-height: 50px;
color: #fff;
position: relative;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
```
JavaScript代码:
```javascript
var titles = ["利润", "营收", "资产", "负债"];
var index = 0;
var title = document.getElementById("title");
function rotateTitle() {
index++;
if (index >= titles.length) {
index = 0;
}
title.innerHTML = titles[index];
}
setInterval(rotateTitle, 2000);
```
在这个示例中,我们定义了一个包含4个标题内容的数组`titles`,并使用`index`变量来记录当前显示的标题。然后使用`setInterval()`函数每隔2秒调用`rotateTitle()`函数,以便动态更改标题内容。在`rotateTitle()`函数中,我们将`index`变量增加1,然后根据`titles`数组的长度进行判断,如果`index`超出了数组长度,则将其重置为0。接着将`title`元素的`innerHTML`属性设置为`titles`数组中对应的内容。
在CSS代码中,我们使用了一个`@keyframes`规则定义了一个名为`rotate`的旋转动画效果,将其应用到了`#title`元素上。在动画中,我们使用了5个关键帧,从0%开始,每隔25%设置一个关键帧,最终达到360度的旋转效果。同时,我们还将`#title`元素的`position`属性设置为`relative`,这样才能使得元素在旋转时不会发生位置偏移。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)