【笔记】css实现鼠标移入，菜单图标变叉叉

实现效果：
原：

移入：

-----------------代码如下-----------------
html部分：

<div class="rotateChange"><div></div><div></div><div></div>
</div>

css部分：

        .rotateChange{border: 1px solid #42b983;width: 50px;height: 50px;padding: 10px;position: relative;}.rotateChange>div{width: 50px;height: 5px;background-color: #42b983;position: absolute;transition: all .2s linear;}.rotateChange>div:nth-of-type(1){top:17px}.rotateChange>div:nth-of-type(2){top:33px}.rotateChange>div:nth-of-type(3){top:50px}.rotateChange:hover{border: 1px solid #eb596c;}.rotateChange:hover div:nth-of-type(1){top:33px;background-color: #eb596c;transform: rotate(45deg);}.rotateChange:hover div:nth-of-type(2){background-color: #eb596c;transform: scaleX(0);}.rotateChange:hover div:nth-of-type(3){top:33px;background-color: #eb596c;transform: rotate(-45deg);}

【笔记】css实现鼠标移入，菜单图标变叉叉相关推荐

html鼠标移除的效果,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下知识点:transform-origin 兼容性:IE10以上 p { positi ...
html设置鼠标移入移出样式,css实现鼠标移入移出动态效果
这篇文章主要介绍了关于css实现鼠标移入移出动态效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下知识点:transform-origin 兼容性:IE10以上 p { positi ...
[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
CSS下拉菜单鼠标移入菜单内容时，菜单隐藏消失的问题
问题描述在使用CSS制作下拉菜单时,鼠标在移动到下拉标题上,下拉菜单内容显示,鼠标移开时,菜单隐藏起来,但是但我们试图把鼠标移动到菜单内容上时,菜单内容也隐藏了.代码是仿照实现某网站的一个小的下拉菜 ...
用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果
用css实现边框的动态渐变色效果,希望对各位能有一些帮助. 边框.html <!DOCTYPE html> <html lang="en"><head ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
css实现鼠标移入图片，增加遮罩并在上方显示另一个图片
问题来源最近做web项目,前端表单添加用户头像时遇到的问题,就是鼠标移入添加图片的按钮要有相应的动态效果,具体要求如图 #鼠标未移入效果 #鼠标移入效果问题解决方式不想让js代码太过繁多,只用c ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
【CSS】鼠标移入显示禁用图标
使用elementUI的 Dropdown - 下拉菜单,某些按钮不可点击时,可以使用以下属性为鼠标添加禁用图标. pointer-events: auto !important; cursor: n ...

【笔记】css实现鼠标移入，菜单图标变叉叉

【笔记】css实现鼠标移入，菜单图标变叉叉相关推荐

最新文章

热门文章