css 渐入渐出简单案例
CSS渐入渐出效果是一种常见的网页动画效果，能够为网页增添一些视觉上的动感和吸引力。下面是一些简单的CSS渐入渐出效果的案例，希望能够满足您的需求。
1. 渐入渐出的背景变化效果：
```html
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        transition: background-color 1s;
    }
    .box:hover {
        background-color: #00f;
    }
</style>
<div class="box"></div>
```
当鼠标悬停在盒子上时，背景会从红渐变为蓝。
2. 渐入渐出的文字颜变化效果：
```html
<style>
    .text {
        color: #f00;
        transition: color 1s;
    }
    .text:hover {
        color: #00f;
    }
</style>
<p class="text">这是一段文字</p>
```
当鼠标悬停在文字上时，文字颜会从红渐变为蓝。
3. 渐入渐出的透明度变化效果：
```html
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        opacity: 1;
        transition: opacity 1s;
    }
    .box:hover {
        opacity: 0.5;
    }
</style>
<div class="box"></div>
```
当鼠标悬停在盒子上时，盒子的透明度会从1渐变为0.5。
4. 渐入渐出的宽度变化效果：borderbox
```html
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        transition: width 1s;
    }
    .box:hover {
        width: 400px;
    }
</style>
<div class="box"></div>
```
当鼠标悬停在盒子上时，盒子的宽度会从200px渐变为400px。
5. 渐入渐出的高度变化效果：
```html
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        transition: height 1s;
    }
    .box:hover {
        height: 400px;
    }
</style>
<div class="box"></div>
```
当鼠标悬停在盒子上时，盒子的高度会从200px渐变为400px。
6. 渐入渐出的边框颜变化效果：
```html
<style>
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid #f00;
        transition: border-color 1s;
    }
    .box:hover {
        border-color: #00f;
    }
</style>
<div class="box"></div>
```
当鼠标悬停在盒子上时，边框颜会从红渐变为蓝。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。