使用js实现一个功能:第一次进入页面获取到一个div然后有一个聚焦效果,类似于操作提示
时间: 2024-02-11 07:04:25 浏览: 62
可以使用CSS3的animation实现这个聚焦效果,具体步骤如下:
1. 首先在CSS中定义一个动画,例如:
```css
@keyframes focus {
0% {
transform: scale(1);
box-shadow: none;
}
50% {
transform: scale(1.1);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
}
100% {
transform: scale(1);
box-shadow: none;
}
}
```
这个动画的意思是,从原始状态开始,先让div放大到1.1倍大小并且设置一个阴影,然后再缩小回原始大小。
2. 然后在CSS中给这个div加上一个类,例如:
```css
.focused {
animation: focus 2s infinite;
}
```
这个意思是,给这个div加上一个名为“focused”的类,然后设置一个2秒的动画,并且设置为无限循环。
3. 最后,在JavaScript中使用document.querySelector()方法获取到这个div,然后给它添加这个“focused”类,例如:
```js
var div = document.querySelector('#myDiv');
div.classList.add('focused');
```
这样,当页面第一次加载时,就会自动给这个div添加一个聚焦效果了。
阅读全文