文章介绍了如何使用CSS实现鼠标悬停时停止动画的效果，以及创建走马灯展示文本的技巧。通过设置不同的关键帧动画，实现了元素的旋转和水平移动，同时动态调整动画持续时间。另外，还展示了元素上下浮动的动画效果。
1、鼠标放上去停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</script>
<title>Document</title>
</head>
<body>
<div class="box">
<div class="yuan" >1111</div>
</div>
</body>
<style>
.box {
display: flex;
}
.yuan {
width: 80px;
height: 80px;
border: 1px solid red;
border-radius: 50%;
background: pink;
animation: xuanzhuan 0.5s infinite;
}
div:hover{
animation-play-state: paused;
}
@keyframes xuanzhuan {
form {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}2、走马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</script>
<title>Document</title>
</head>
<body>
<div class="box">
<div
:class="item.name.length<=7?'no-animation':'animation'"
:style="{animationDuration:item.name.lenght*0.8+'s'}"
>
{{item.name}}
</div>
</div>
</body>
<style>
.anmation{
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes move{
0%{
transform: translateX(5%);
}
100%{
transform: translateX(-100%);
}
}3、上下浮动
animation: movepoint 2.5s infinite;
@keyframes movepoint {
50%{
transform: translate(0,-10px);
}
}
扫一扫
375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
