备案控制台
探索云世界
开发者社区 云计算 文章 正文

右侧是长方形和半圆结合 光标放上去在规定时间内完成动画

2022-05-10 51
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 右侧是长方形和半圆结合 光标放上去在规定时间内完成动画

/*

border-top-right-radius: 40px;

border-bottom-right-radius: 40px;

高度的一半就可以让右边变成一个半圆

*/


.right-show {
width: 200px;
height: 80px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
background: pink;
transition: all 0.6s; /*  过渡写到本身上 谁做过渡动画，写到谁身上*/
}
.right-show:hover {
width: 240px;
}
<div class="right-show"></div>
晚来南风晚相识
目录
相关文章
你挚爱的强哥
|
19天前
VSCode如何自动换行，右侧换行间距长度，隐藏右侧代码预览（Minimap代码缩略图滚动条），比对代码差异窗口也自动换行
VSCode如何自动换行，右侧换行间距长度，隐藏右侧代码预览（Minimap代码缩略图滚动条），比对代码差异窗口也自动换行
你挚爱的强哥
21 0
前方一片光明
|
8月前
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
前方一片光明
58 0
刻刻帝的海角
|
3月前
鼠标不同方位移入特效
鼠标不同方位移入特效
刻刻帝的海角
26 0
你挚爱的强哥
|
4月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
你挚爱的强哥
41 0
讓丄帝愛伱
|
5月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
讓丄帝愛伱
83 0
前端精髓
|
JavaScript 前端开发
菜单栏底部线条切换效果（标题滚动居中显示）
菜单栏底部线条切换效果（标题滚动居中显示）
前端精髓
108 0
菜单栏底部线条切换效果（标题滚动居中显示）
白水你要努力啊
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
白水你要努力啊
143 0
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
sysdzw
|
前端开发 JavaScript 计算机视觉
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
sysdzw
936 0
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
hahacai
点击图片或者鼠标划过切换样式的另一种写法
点击图片或者鼠标划过切换样式的另一种写法
hahacai
57 0
一乐乐
|
Java
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框
一乐乐
416 0
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框