css3动画特效代码

admin 2024年08月04日 01:14 15 0

### CSS3动画特效代码：探索与实现

在Web开发中，CSS3的引入极大地丰富了网页的表现力和交互性，通过CSS3，开发者能够创建出各种令人惊叹的动画效果，无需依赖JavaScript或Flash等插件，本文将深入探讨几种常见的CSS3动画特效代码，包括弹性晃动、悬浮按钮、搜索框放大、旋转按钮、提示框移动等，并分享一些实用的代码示例。

#### 1. 弹性晃动（Shake Effect）

弹性晃动效果常用于吸引用户注意或反馈操作结果，通过`@keyframes`和`animation`属性，我们可以轻松实现这一效果。

.shake {
  width: 40px;
  height: 40px;
  display: block;
  background: lightgreen;
  border-radius: 50%;
  margin: 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.shake:hover {
  -webkit-animation: shake 0.25s;
  animation: shake 0.25s;
  background: lightblue;
}

@keyframes shake {
  0%, 10%, 55%, 90%, 94%, 98%, 100% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1.14, 0.86);
  }
  75% {
    transform: scale(0.92, 1.08);
  }
  92% {
    transform: scale(1.04, 0.96);
  }
  96% {
    transform: scale(1.02, 0.98);
  }
  99% {
    transform: scale(1.01, 0.99);
  }
}

#### 2. 悬浮按钮（Hover Button）

悬浮按钮通过改变鼠标悬停时的样式，提升用户体验，这里以搜索框放大为例。

.search {
  width: 80px;
  height: 40px;
  border-radius: 40px;
  border: 2px solid lightblue;
  position: absolute;
  right: 200px;
  outline: none;
  text-indent: 12px;
  color: #666;
  font-size: 16px;
  padding: 0;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}

.search:focus {
  width: 200px;
}

#### 3. 旋转按钮（Rotate Button）

旋转按钮常用于表示加载状态或触发某个动作，通过`@keyframes`和`transform: rotate()`，我们可以实现按钮的旋转效果。

.rotate-button {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.rotate-button:hover {
  transform: rotate(360deg);
}

#### 4. 提示框移动（Tooltip Move）

提示框移动效果常用于显示额外信息或帮助文本，通过`@keyframes`和`transform: translateX()`或`translateY()`，我们可以实现提示框的平滑移动。

```css

.tooltip {

position: relative;

display: inline-block;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;