html给图片加特效

基础结构与样式设置

在HTML中插入图片并设置基础样式,为特效提供载体。

“` | 插入图片并赋予CSS类名 |
| “`css
.effect-image {
width: 300px;
transition: all 0.5s; / 基础过渡效果 /
}
“` | 定义图片宽度和全局过渡效果 |

悬停特效实现

通过CSS伪类和过渡属性实现鼠标悬停时的动态效果。

.effect-image:hover {
transform: scale(1.2); / 放大1.2倍 /
}

| 旋转效果 | ```css
.effect-image:hover {
    transform: rotate(15deg); / 顺时针旋转15度 /
}
``` | 悬停时图片倾斜旋转 |
| 阴影效果 | ```css
.effect-image:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.3); / 添加投影 /
}
``` | 悬停时出现阴影增强立体感 |
---
 动画特效扩展
使用CSS动画关键帧实现更复杂的动态效果。
| 动画类型 | 代码示例 | 效果说明 |
|----------|----------|----------|
| 闪烁效果 | ```css
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.effect-image.flash:hover {
    animation: flash 1s infinite; / 无限循环闪烁 /
}
``` | 悬停时图片持续闪烁 |
| 渐变色块 | ```css
@keyframes colorblock {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
.effect-image.colorblock {
    background: linear-gradient(45deg, #f06, #f90);
    background-size: 400% 400%;
    animation: colorblock 5s ease infinite;
}
``` | 图片叠加动态渐变层 |
---
 JavaScript交互特效
结合JS实现点击切换、拖动等高级交互效果。
| 功能类型 | 代码示例 | 效果说明 |
|----------|----------|----------|
| 点击切换滤镜 | ```javascript
let toggle = false;
document.querySelector('.effect-image').addEventListener('click', function() {
    toggle = !toggle;
    this.style.filter = toggle ? 'grayscale(100%)' : 'none';
});
``` | 点击图片切换黑白滤镜 |
| 鼠标跟随 | ```javascript
const image = document.querySelector('.effect-image');
document.addEventListener('mousemove', function(e) {
    const x = e.pageX image.offsetWidth/2;
    const y = e.pageY image.offsetHeight/2;
    image.style.transform = `translate(${x/10}px, ${y/10}px)`;
});
``` | 鼠标移动时图片跟随偏移 |
---
 相关问题与解答
Q1：如何调整动画速度和延迟时间？  
A1：通过修改`transition-duration`（过渡时长）或`animation-duration`（动画总时长）属性，单位为秒(s)或毫秒(ms)。  
```css
.effect-image {
    transition: all 1s ease-out; / 过渡持续1秒 /
}
@keyframes example {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.effect-image.animated {
    animation: example 2s forwards; / 动画持续2秒 /
}

Q2：如何同时应用多个特效？
A2：通过组合CSS类或使用复合属性。

.effect-image.combo:hover {
    transform: scale(1.3) rotate(-5deg); / 同时放大和旋转 /
    filter: brightness(1.2); / 增加亮度 /
}

或直接在单个属性中合并效果：

.effect-image:hover {
    transform: translateY(-20px) rotate(10deg); / 垂直位移+旋转 /
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); / 同时添加阴影 /
}