css 鼠标移动炫酷动画
时间: 2023-07-02 10:23:04 浏览: 56
CSS可以实现很多鼠标移动的炫酷动画效果,这里为你提供一些示例代码:
1. 鼠标移动时跟随鼠标的文本效果:
```
<style>
.text {
position: absolute;
color: #fff;
font-size: 24px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.text:hover {
transform: translate(-50%, -50%) scale(1.5);
}
</style>
<div class="text">Hover Me</div>
```
2. 鼠标移动时出现波浪线效果:
```
<style>
.wave {
position: relative;
height: 50px;
background-color: #fff;
overflow: hidden;
}
.wave::before {
content: "";
position: absolute;
width: 100%;
height: 20px;
background-image: radial-gradient(circle at 0 100%, #fff, transparent 50%);
top: -10px;
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.wave:hover::before {
transform: scaleX(1);
}
</style>
<div class="wave">Hover Me</div>
```
3. 鼠标移动时出现3D立方体翻转效果:
```
<style>
.cube {
position: relative;
width: 100px;
height: 100px;
perspective: 1000px;
transition: transform 0.5s ease;
}
.cube:hover {
transform: rotateY(180deg);
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
backface-visibility: hidden;
}
.cube .front {
transform: translateZ(50px);
}
.cube .back {
transform: translateZ(-50px) rotateY(180deg);
}
</style>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
</div>
```
这些示例代码只是一部分,你可以根据自己的需求和想法,自由发挥CSS的强大功能,创造出更加炫酷的动画效果。