画一只动态的皮卡丘（四）

最新推荐文章于 2024-04-17 00:00:41 发布

sunwan19941023

最新推荐文章于 2024-04-17 00:00:41 发布

阅读量191

点赞数

分类专栏： CSS3 项目复习

本文链接：https://blog.csdn.net/m0_49210479/article/details/108264881

版权

这篇博客介绍了如何创建一个动态的皮卡丘按钮，包括HTML结构、CSS样式设置，以及使用jQuery进行事件监听和速度控制。通过设置按钮状态、引入jQuery库、监听按钮点击，利用SetTimeout实现动态速度变化，使按钮交互更有趣。

摘要由CSDN通过智能技术生成

一、创建button按钮

1 HTML结构

<div class="action">
    <button data-speed="slow">慢速</button>   <!-- 自定义属性 -->
    <button data-speed="normal" class="active">中速</button>
    <button data-speed="fast">快速</button>
</div>

2 设置按钮的一般样式

.actions{
  position: absolute;
  top: 0;
  right: 0;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
}

.actions>button{
  margin: 10px;
  padding: 8px 10px;
  background: #ddd;
  border: none;     /*去除默认按钮的 边框样式*/
}

3 设置被选中按钮的样式

.actions>button.active{
  box-shadow: 1px 1px 1px rgba(0,0,0,0.8);    /* box-shadow样式*/
}

/* .actions>button:focus{
  outline: none;}        去除默认按钮的 选中边框颜色
*/