伪类选择器(:hover/:focus等)
使用 styled-components 可以实现CSS中:hover
,:focus
,:active
等效果
const ImgUrl = styled.a`
font-size: 12px;
&:hover {
color: #42b983;
}
`;
动画 @keyframe
使用 styled-components 同样可以实现 CSS动画 @keyframe
const change= keyframes`
0%{
width:100px;
}
50% {
width:30px;
}
100%{
width:70px;
}
`;
const ShowAnimation = styled.div`
width:100px;
height:100px;
&:hover {
animation: ${change} 2s linear infinite;
}
`;