Javascript 更改css形状onclick

我有两种形状，一条线和一个十字架。当我单击该线时，它将变成一个十字。我只想在单击时获得流体形状变换

线

交叉

这是JSFIDLE-

谢谢你的帮助。 F.

您应该在声明中添加一个

CSS转换允许在CSS值中发生属性更改 在规定的时间内平稳地进行

比如,

div{
高度：30px；
宽度：30px；
背景：浅灰色；
位置：相对位置；
}
部门：之前，
部门：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：0；
左边框：2倍纯黑；
左：50%；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
转化：translateX（-50%）；
过渡：所有0.8秒；
}
div:悬停：之前{
-webkit变换：translateX（-50%）旋转（45度）；
-moz变换：translateX（-50%）旋转（45度）；
-ms变换：translateX（-50%）旋转（45度）；
变换：translateX（-50%）旋转（45度）；
}
div:悬停：之后{
-webkit变换：translateX（-50%）旋转（-45度）；
-moz变换：translateX（-50%）旋转（-45度）；
-ms变换：translateX（-50%）旋转（-45度）；
变换：translateX（-50%）旋转（-45度）；
}

将此灰色框悬停

您应该在声明中添加一个

CSS转换允许在CSS值中发生属性更改 在规定的时间内平稳地进行

比如,

div{
高度：30px；
宽度：30px；
背景：浅灰色；
位置：相对位置；
}
部门：之前，
部门：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：0；
左边框：2倍纯黑；
左：50%；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
转化：translateX（-50%）；
过渡：所有0.8秒；
}
div:悬停：之前{
-webkit变换：translateX（-50%）旋转（45度）；
-moz变换：translateX（-50%）旋转（45度）；
-ms变换：translateX（-50%）旋转（45度）；
变换：translateX（-50%）旋转（45度）；
}
div:悬停：之后{
-webkit变换：translateX（-50%）旋转（-45度）；
-moz变换：translateX（-50%）旋转（-45度）；
-ms变换：translateX（-50%）旋转（-45度）；
变换：translateX（-50%）旋转（-45度）；
}

---

将此灰色框悬停

使用CSS转换。这里有一个指南：

---

你需要像

transition:all 1s这样的东西在CSS中使用CSS转换。这里有一个指南：

你需要像
transition:all 1s这样的东西在CSS中，按如下方式执行：


函数changeShape（）{
var ele=document.getElementById（“形状”）；
（ele.className==“linea”）？ele.className=“cross”：ele.className=“linea”；
}
div{
-webkit转换：所有1s轻松；/*Firefox*/
-moz转换：所有1s轻松；/*WebKit*/
-o-transition:all 1s轻松；/*Opera*/
转换：所有1s轻松；/*标准*/
左边距：自动；
右边距：自动；
}
李娜先生{
背景：黑色；
高度：30px；
位置：相对位置；
宽度：2px；}
.十字架{
背景：黑色；
高度：30px；
位置：相对位置；
宽度：2倍；
-ms变换：旋转（45度）；/*IE 9*/
-webkit变换：旋转（45度）；/*铬合金、Safari、Opera*/
变换：旋转（45度）；
}
.克罗斯：之后{
背景：黑色；
内容：“；
高度：2倍；
左-14px；
位置：绝对位置；
顶部：14px；
宽度：30px；
}

更改形状
如下所示：


函数changeShape（）{
var ele=document.getElementById（“形状”）；
（ele.className==“linea”）？ele.className=“cross”：ele.className=“linea”；
}
div{
-webkit转换：所有1s轻松；/*Firefox*/
-moz转换：所有1s轻松；/*WebKit*/
-o-transition:all 1s轻松；/*Opera*/
转换：所有1s轻松；/*标准*/
左边距：自动；
右边距：自动；
}
李娜先生{
背景：黑色；
高度：30px；
位置：相对位置；
宽度：2px；}
.十字架{
背景：黑色；
高度：30px；
位置：相对位置；
宽度：2倍；
-ms变换：旋转（45度）；/*IE 9*/
-webkit变换：旋转（45度）；/*铬合金、Safari、Opera*/
变换：旋转（45度）；
}
.克罗斯：之后{
背景：黑色；
内容：“；
高度：2倍；
左-14px；
位置：绝对位置；
顶部：14px；
宽度：30px；
}

更改形状
您还没有添加javascript。它是作为外部资源@jbutler483Still添加的，它对我不起作用（无论如何，在我的chrome上），您需要将“line”元素实际更改为十字（通过css），以便能够使用css转换。目前，您的代码实际上是将line元素完全替换为cross元素。例如，您可以将两条线放置在彼此的顶部，而不是简单地旋转两条线以形成一个十字（然后可以通过css transition属性设置动画）。编辑：参见jbutler483的答案。您还没有添加javascript。它是作为外部资源@jbutler483Still添加的，它对我不起作用（无论如何，在我的chrome上），您需要实际将“line”元素更改为十字（通过css），以便能够使用css转换。目前，您的代码实际上是将line元素完全替换为cross元素。例如，您可以将两条线放置在彼此的顶部，而不是简单地旋转两条线以形成一个十字（然后可以通过css transition属性设置动画）。编辑：请参阅jbutler483的答案。@Federicoferari:您需要添加供应商前缀（safari要求transform的前缀为-webkit-）。我已经编辑了我的答案以包括这些。@Federicoferari：感谢某人的最好方式就是接受他们的答案；）（这是他们答案左边的勾号）@Federicoferari：您需要添加供应商前缀（safari要求transform的前缀为-webkit-）。我已经编辑了我的答案以包括这些。@Federicoferari:感谢某人的最好方式就是接受他们的答案
#linea {
background: black;
height: 30px;
position: relative;
width: 2px;
}

#cross {
background: black;
height: 30px;
position: relative;
width: 2px;
-webkit-transform: rotate(45deg);
}

#cross:after {
background: black;
content: "";
height: 2px;
left: -14px;
position: absolute;
top: 14px;
width:30px;
}