看我的动画。
我制作这个是为了使用一个显示和隐藏密码的按钮。
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 175px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
/* .eye::before{
animation: slash infinite 5s;
} */
}
@keyframes slash{
from{width:1px;}
to{width:175px}
}<div class="eye"></div>看。。。
我想在.eye::after上运行动画slash
当.eye是:active时
也可以这样做，直到再次点击(也就是说，一旦眼睛被点击，画一个斜线，让它显示出来，直到再次单击(
也就是说，当.eye:active仅使用css触发时，我想在.eye::after上触发slash动画。
我添加了一个示例，您不需要使用@keyframes和animation来为单击时的眼睛设置动画，只需使用过渡即可。此外，当您在示例中使用:active伪类时，示例也可以使用它，但看起来您需要在单击时切换它，这样只需在单击时添加和删除类.active，并在CSS 中将:active替换为.active
.eye{
margin: 50px;
color: black;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5;
transition: all 0.3s ease-in;
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: all 0.3s ease-in;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
.eye:active::after{
width: 175px;
background-color: rgb(174, 0, 0);
}<div class="eye"></div>您只需添加一个javascript的线性代码即可实现这一点，即classList.toggle()
const myfun = () => {
const eye = document.querySelector(".eye");
eye.classList.toggle('changed')
};.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: 1s;
}
.changed:after {
width: 175px;
transition: 1s;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="style.js"></script>
</head>
<body>
<div class="eye" onclick="myfun()"></div>
</body>
</html>