Html 旋转效应锚标签CSS3

大家好

我试图用CSS3创建旋转悬停效果

只是做了一个圆圈旋转的效果。在这里检查JSFIDLE：

然而，我现在想做的是创建一些旋转的东西，但这次是它的长方体类型

如图所示：

所以基本上我想要类似的效果，就像我上面展示的JSFIDLE一样，但是这次它必须是box

真的很难弄明白这一点。以下是我的CSS：

    body {
    background: #292929;
    padding-left: 30px;
    font-size: 12px;
}


.twist {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}
.twist:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.twist:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}



 .twist.demo-4 {
    width: 92px;
    height: 92px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}

.twist.demo-4:before {
    line-height: 92px;
}
.twist.demo-4:after {
    top: -4px;
    left: -4px;
    padding: 0;
    z-index: 10;
    border: 4px dashed #fff;
}
.twist.demo-4:hover {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    color: #fff;
}
.twist.demo-4:hover i {
    color: #fff;
}

 .twist.demo-4.spin:hover {
    -webkit-transition: box-shadow 0.2s;
    -moz-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}
.twist.demo-4.spin:hover:after {
    -webkit-animation: spinAround 9s linear infinite;
    -moz-animation: spinAround 9s linear infinite;
    animation: spinAround 9s linear infinite;
}
@-webkit-keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spinAround {
    from {
        -moz-transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

希望您能帮助我使用JSFIDLE文件

谢谢

学分：

我不认为只有静态边界才有可能。以下是另一种解决方案：

。旋转虚线{
位置：相对位置；
利润率：40px自动；
宽度：90px；
高度：90px；
溢出：隐藏；
颜色：#268；
}
.旋转虚线.冲刺{
显示：块；
宽度：100%；
身高：100%；
位置：绝对位置；
}
.旋转虚线。虚线：第n个类型（2）{
-webkit变换：旋转（90度）；
}
.旋转虚线。虚线：第n个类型（3）{
-webkit变换：旋转（180度）；
}
.旋转虚线。虚线：第n个类型（4）{
-webkit变换：旋转（270度）；
}
.旋转虚线{
显示：块；
位置：绝对位置；
左：0；
排名：0；
宽度：200%；
边框底部：5px实心
}
.强{
显示：块；
宽度：105%；
线高：90px；
文本对齐：居中；
位置：绝对位置；
}
.旋转虚线：悬停{
光标：指针；
}
.旋转虚线：悬停。虚线i{
-webkit动画：slideDash 2.5s无限线性；
边框底部：5px虚线
}
@-webkit关键帧slideDash{
从{
-webkit转换：translateX（-50%）；
}
到{
-webkit转换：translateX（0%）；
}
}

演示

我的答案并不完全符合您的示例，但您可能会感兴趣，因为它是一个完整的CSS3解决方案，没有HTML标记更改。动画将不是旋转，而是平移

网络工具包版本

.bordered{
溢出：隐藏；
}
.边界：之前{
内容：''；
位置：绝对位置；
顶部：5px；/*5px：边框宽度*/
左：5px；
右：5px；
底部：5px；
背景：白色；
z指数：-1；
}
.边界：之后{
内容：''；
位置：绝对位置；
前-50%；
左-50%；
右图：-50%；
底部-50%；
背景：黑色；
z指数：-2；
}
.带边框：悬停：之后{
背景：-webkit线性渐变（左侧，白色50%，黑色50%）；/*黑色：边框颜色*/
背景尺寸：20px 100%；/*20px：虚线宽度*/
-webkit动画：边界动画1s线性无限；
}
@-webkit关键帧已设置动画{
从{
变换：旋转（45度）平移（0,0）；
}
到{
变换：旋转（45度）平移（20像素，0）；
}
}
/*---仅限款式--*/
.边界{
宽度：150px；
高度：150像素；
线高：150px；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

---

Lorem ipsum

除了在SVG中，你可能无法用CSS实现这一点。特别是有没有人知道如何在简单的CSS3中实现这一点？这将对我们所有人都有帮助。谢谢你的回答，但是你给我看的演示在我悬停的时候根本没有移动。另外，在正常状态下必须有一个实心边框，在悬停状态下必须有一个移动的虚线边框。如果您试图在Chrome中浏览，则必须将动画属性更改为webkit。我会为你准备一个例子。你应该提到你正在使用@vsync的解决方案，他在这条评论中写道：@Danield实际上是这个的一个修改版本：@Danield完全同意