Question

我有一个圆圈，我想要增加宽度和高度，然后旋转直立。问题是你可以看到嵌入的复选标记从圆圈开始向内螺旋而不是与圆圈一起生长。

＆＃13;

$(function() {
	$("span").addClass("active");
})

＆＃13;

span {
	position: absolute;
	display:block;
	color: red;
	font-size: 0px;
	font-weight: bold;
	width: 0px;
	height: 0px;
	top: 50%;
	left: 50%;
	transform:  translateY(-50%) translateX(-50%);
	line-height:80px;
	text-align: center;
	background: rgba(32,167,110,0.9);
	border: 2px solid rgb(32,167,110);
	border-radius: 50%;
	-webkit-transform: rotateZ(-360deg);
	-ms-transform: rotateZ(-360deg);
	transform: rotateZ(-360sdeg);
	transition: all 5s;
	margin-left: -20px;
	margin-top:-34px;
}

span.active {
	-webkit-transform: rotateZ(0deg);
	-ms-transform: rotateZ(0deg);
	transform: rotateZ(0sdeg);
	width: 80px;
	height: 80px;
	font-size: 45px;
	margin-left: -40px;
	margin-top:-68px;
}

＆＃13;

<span>✓</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

我希望随着它的增长，将复选标记保持在圆圈内。

Answer 1

我不确定我的问题是否正确，但如果您想隐藏绿色圆圈外的复选标记，则可以添加css属性overflow: hidden;。

编辑：根据作者的评论，我添加了一个新的解决方案。

如果要将复选标记符号放在圆圈内，然后将其与圆圈一起转换，最好为复选标记添加另一个元素（或伪元素），并仅将变换指定给圆圈。以下是使用伪元素进行转换的示例。

$(function() {
    $("span").addClass("active");
});

/* <div> is only for layouting (centering into the middle) */
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

span {
    display: block;
    position: relative; /* needs to be set, that the checkmark is positioned relative to the <span> */
    color: red;
    font-size: 0;
    font-weight: bold;
    width: 0;
    height: 0;
    text-align: center;
    background: rgba(32,167,110,0.9);
    border: 2px solid rgb(32,167,110);
    border-radius: 50%;
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
    transition: all 5s;
}

span:after {
    content: "✓";
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

span.active {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 80px;
    height: 80px;
    font-size: 45px;
}

<div>
    <span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS圈旋转/成长过渡，文本从外面开始

1 个答案: