AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

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

/*

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>
晚来南风晚相识
目录
相关文章
前方一片光明
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
前方一片光明
84 0
你挚爱的强哥
|
6月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
你挚爱的强哥
127 0
讓丄帝愛伱
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
讓丄帝愛伱
167 0
前端精髓
|
JavaScript 前端开发
菜单栏底部线条切换效果（标题滚动居中显示）
菜单栏底部线条切换效果（标题滚动居中显示）
前端精髓
160 0
菜单栏底部线条切换效果（标题滚动居中显示）
白水你要努力啊
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
白水你要努力啊
168 0
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
守望时空33
|
C#
C#创建无边框可拖动窗口
C#创建无边框可拖动窗口
守望时空33
199 0
sysdzw
|
前端开发 JavaScript 计算机视觉
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
sysdzw
1104 0
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
hahacai
点击图片或者鼠标划过切换样式的另一种写法
点击图片或者鼠标划过切换样式的另一种写法
hahacai
66 0
一乐乐
|
Java
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框
一乐乐
478 0
swing中一些常见的鼠标事件（鼠标形状的改变、鼠标接近、按下（图标的切换）、鼠标接近、离开（字体颜色的改变）、鼠标拖拽等）还有系统托盘+对话框
fbh
|
JavaScript 前端开发
鼠标移到图片上图片放大
一 在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。
fbh
1874 0