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

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

css3图标一直旋转样式,css3 – 问题使Bootstrap3图标旋转
灵感来自 Fontawesome,我试图使一个旋转图标与bootstrap3.它很容易通过CSS3转换和转换实现.问题是图标不围绕中心旋转.它在旋转时摆动. 代码粘贴在下面.任何人知道是什么原因导致的 ...
旋转样式文本动画PR标题字幕模板MOGRT
这是一个动态且功能强大的旋转样式文本动画PR标题字幕模板,由4K分辨率的彩色标题组成,将帮助您轻松地为社交媒体内容开发视频!调整颜色并在文本中使用任何字体! 项目特点: 4K分辨率全色控件适用于任 ...
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章 AnimatedDef ...
利用css3的3d旋转透视加动画做的一个骰子动态效果
实现效果代码 <div class="father"><div class="son son1">1</div><d ...
如何让layui中的字体图标增加动态样式变为动态图标
1.html代码,首先定义 <span style="display: flex; flex-direction: row; align-items: center; justify- ...
T5L串口屏行业应用之动画图标控件
T5L_DGUS屏封装了DGUS动画图标控件功能,可支持对图标的运动速度.播放方式进行设置,常应用于提示.警示.报警等显示场合,如新能源行业使用的充电设备检测仪.工控行业使用计量泵,其显示效果均可以通 ...
php带旋转动画刷新页面,CSS_CSS实现弹簧效果的旋转加载动画，先看看效果，像是弹簧在伸缩 - phpStudy...
CSS实现弹簧效果的旋转加载动画先看看效果,像是弹簧在伸缩: 具体代码: 此处用到CSS3的transform属性. CSS3的变形(transform)属性让元素在一个坐标系统中变形.这个属性包含 ...
100多个纯CSS3动画图标
这次我们要来分享一组纯CSS3打造的动画图标,总共100多个,每一个图标没有用图片,而是利用CSS3的相关特性来实现.在这些CSS3图标中,有部分是动态的,这些带动画的图标也是利用CSS3的动画属性实 ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...

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

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

最新文章

热门文章