html span边框,css – 在父悬停上旋转span元素边框

给父div：hover伪类并将其子目标 – div：hover children

也就是说,我是一个平滑动画的傻瓜;这就是我在这个例子中所关注的内容,同时减少了所需的标记.

让我们做到这一点 – 中间的笔划消失,底部笔划完成360度旋转,最后在中间.右边的两个例子更进一步.这些低级GIF在下面的演示中看起来好多了！

HTML

只需要一个HTML元素：

CSS

I am :before

I am an illusion created by box-shadow

I am :after

>平滑过渡由div给出：before,div：after {transition：all 0.3s; }

完整示例 – 简单过渡

div:before,

div:after {

transition: all 0.3s;

}

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

cursor: pointer

}

div:before,

div:after {

content: '';

height: 5px;

width: 50px;

display: block;

position: absolute;

background: #FFF;

left: 50%;

top: 50%;

margin-left: -25px;

transform: rotate(0);

}

div:before {

margin-top: -20px;

box-shadow: 0 20px 0 #FFF;

}

div:after {

margin-top: 20px;

}

div:hover:after {

margin-top: 0;

transform: rotate(360deg);

}

div:hover:before {

margin-top: 0;

transform: rotate(90deg);

box-shadow: none;

}

更多例子

您可以使用以下基本概念制作各种动画：

h2 {

display: inline-block;

vertical-align: middle;

font-size: 0.8em;

}

div,

div:before,

div:after {

transition: all 0.3s;

}

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

cursor: pointer;

display: inline-block;

vertical-align: middle;

margin: 10px;

}

div:before,

div:after {

content: '';

height: 5px;

width: 50px;

display: block;

position: absolute;

background: #FFF;

left: 50%;

top: 50%;

margin-left: -25px;

transform: rotate(0);

}

div:before {

margin-top: -20px;

box-shadow: 0 20px 0 #FFF;

}

div:after {

margin-top: 20px;

}

div.one:hover:after {

margin-top: 0;

transform: rotate(360deg);

}

div.one:hover:before {

margin-top: 0;

transform: rotate(450deg);

box-shadow: none;

}

div.two:hover {

border-radius: 50%;

transform: rotate(180deg);

}

div.two:hover:after {

margin-top: -3px;

transform: rotate(360deg);

width: 30px;

margin-left: -16px;

}

div.two:hover:before {

margin-top: -3px;

transform: rotate(450deg);

box-shadow: none;

width: 30px;

margin-left: -16px;

}

div.three {

box-shadow: 0 0 1px #F00;

}

div.three:hover {

border-radius: 50%;

transform: rotate(360deg);

box-shadow: 0 0 30px #F00;

-webkit-animation: pulse 1s infinite;

animation: pulse 1s infinite;

}

div.three:hover:after {

margin-top: -3px;

transform: rotate(360deg);

width: 30px;

margin-left: -16px;

}

div.three:hover:before {

margin-top: -3px;

transform: rotate(450deg);

box-shadow: none;

width: 30px;

margin-left: -16px;

}

@-webkit-keyframes pulse {

0% {

transform: scale(1);

box-shadow: 0 0 5px #F00;

}

50% {

transform: scale(1.05);

box-shadow: 0 0 30px #F00;

}

100% {

transform: scale(1);

box-shadow: 0 0 5px #F00;

}

}

@keyframes pulse {

0% {

transform: scale(1);

box-shadow: 0 0 5px #F00;

}

50% {

transform: scale(1.05);

box-shadow: 0 0 30px #F00;

}

100% {

transform: scale(1);

box-shadow: 0 0 5px #F00;

}

}

Spinny

Circular Ripple

Heartbeat