.my-icon {
transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
position: absolute;
top: 50%;
right: 6px;
width: 10px;
&:after {
content: '';
position: absolute;
vertical-align: baseline;
background: #fff;
background-image: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .65));
width: 6px;
height: 1.5px;
border-radius: 2px;
-webkit-transform: rotate(45deg) translateX(-2px);
transform: rotate(45deg) translateX(-2px);
transition: all .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
}
&:before {
content: '';
position: absolute;
vertical-align: baseline;
background: #fff;
background-image: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .65));
width: 6px;
height: 1.5px;
border-radius: 2px;
-webkit-transform: rotate(-45deg) translateX(2px);
transform: rotate(-45deg) translateX(2px);
transition: all .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
}
}
.ant-menu-submenu-open .my-icon {
&:after {
-webkit-transform: rotate(-45deg) translateY(-2px);
transform: rotate(-45deg) translateY(-2px);
background: linear-gradient(to right, #1890ff, #1890ff);
}
&:before {
-webkit-transform: rotate(45deg) translateY(-2px);
transform: rotate(45deg) translateY(-2px);
background: linear-gradient(to right, #1890ff, #1890ff);
}
}
antd css3实现的箭头切换
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 因为没有gif,首先脑补一下小三角完美的旋转180度,实现代码如下 html css js 刚开始的时候是采用的....
- 记录的原因:项目中遇到一个问题,使用antd的table组件,在鼠标悬停到一行的时候显示或者隐藏按钮,如下:鼠标进...