css3图标一直旋转样式,css3动画--图标翻转效果

这个效果不复杂，纯CSS就可以实现，可以给网站增加些动态效果。下面看看怎么实现的吧。

录制_2021_03_22_11_00_28_580.gif

HTML

• 地址
• 电话
• 邮编
• 邮箱

CSS

.nav {

margin: 0 auto;

padding: 0;

width: 800px;

overflow: hidden;

background: white;

.item {

width: 200px;

height: 150px;

float: left;

text-align: center;

list-style-type: none;

position: relative;

.circle {

position: relative;

display: block;

width: 50px;

height: 50px;

box-shadow: 3px 2px 2px rgba(0, 0, 0, .3);

border-radius: 50%;

margin: 20px auto;

background: white;

transition: all .2s;

.iconfont {

position: absolute;

font-size: 20px;

left: 50%;

transform: translate(-50%, -50%);

transition: all .1s;

}

.iconfont.before {

color: #F2993F;

top: 50%;

transition-delay: .2s;

}

.iconfont.after {

color: white;

top: 150%;

opacity: 0;

transition-delay: .3s;

}

}

&:hover {

.circle {

background: #F2993F;

transform: rotateY(180deg);

}

.iconfont.before {

opacity: 0;

}

.iconfont.after {

top: 50%;

opacity: 1;

}

}

}

}

动动小手，给我点个赞吧.png