Css 伪元素的跃迁背景
我有一个伪元素，它的边界半径为50%，当我悬停在它上面时，它有一个背景色，所以当我悬停时，会显示一个圆 我想添加一个过渡，这样当我悬停（比如你在gmail上悬停星星图标）时，圆圈看起来会变大，但我不知道怎么做 这就是我所尝试的：Css 伪元素的跃迁背景,css,Css,我有一个伪元素，它的边界半径为50%，当我悬停在它上面时，它有一个背景色，所以当我悬停时，会显示一个圆 我想添加一个过渡，这样当我悬停（比如你在gmail上悬停星星图标）时，圆圈看起来会变大，但我不知道怎么做 这就是我所尝试的： .container{ 位置：相对位置； 高度：100px； 宽度：300px； 填充：24px； 背景：#fff； 显示器：flex； 弯曲方向：立柱； 证明内容：之间的空间； 框大小：边框框； 颜色：黑色； 列表样式：无； 边框：2件纯黑； } 输入[type=“
.container{
位置：相对位置；
高度：100px；
宽度：300px；
填充：24px；
背景：#fff；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
框大小：边框框；
颜色：黑色；
列表样式：无；
边框：2件纯黑；
}
输入[type=“checkbox”]{
高度：40px；
宽度：40px；
位置：绝对位置；
顶部：12px；
右：12px；
保证金：自动；
外观：无；
大纲：无；
光标：指针；
不透明度：1；
边界：无；
}
输入[type=“checkbox”]：：之后{
内容：url（“https://svgshare.com/i/Qo7.svg");
位置：绝对位置；
排名：0；
左：0；
边界半径：50%；
保证金：自动；
宽度：100%；
身高：100%；
指针事件：无；
显示器：flex；
证明内容：中心；
对齐项目：居中；
z指数：2；
过渡时间：1s；
过渡计时功能：立方贝塞尔（0.4,0,0.2,1）；
过渡性质：背景；
背景大小：40%；
背景位置：中心；
}
输入[type=“checkbox”]：选中：之后{
内容：url（“https://svgshare.com/i/Qmp.svg");
}
输入[type=“checkbox”]：悬停：在{
背景：线性梯度（至底部，#D9DEEA 0%，#D9DEEA 100%）无重复；
背景大小：100%；
}您可以优化代码，并使用后台完成所有操作。SVG没有完全居中，因为SVG本身的起点不在中心
svg{
边框：1px实心；
}