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

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

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

/*

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>
晚来南风晚相识
目录
相关文章
博客zhu虎康
|
1月前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
博客zhu虎康
96 0
前方一片光明
|
10月前
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
前方一片光明
63 0
刻刻帝的海角
|
1月前
鼠标不同方位移入特效
鼠标不同方位移入特效
刻刻帝的海角
34 0
你挚爱的强哥
|
1月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
你挚爱的强哥
56 0
讓丄帝愛伱
|
7月前
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
讓丄帝愛伱
95 0
秋叶原的琴音
|
7月前
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮
秋叶原的琴音
89 0
前端精髓
|
JavaScript 前端开发
菜单栏底部线条切换效果（标题滚动居中显示）
菜单栏底部线条切换效果（标题滚动居中显示）
前端精髓
118 0
菜单栏底部线条切换效果（标题滚动居中显示）
白水你要努力啊
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
白水你要努力啊
150 0
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
sysdzw
|
前端开发 JavaScript 计算机视觉
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
sysdzw
966 0
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
hahacai
点击图片或者鼠标划过切换样式的另一种写法
点击图片或者鼠标划过切换样式的另一种写法
hahacai
59 0

热门文章

最新文章

  • 1
    优酷中后台前端解决方案－总览
  • 2
    流计算风云再起 - PostgreSQL携PipelineDB力挺IoT(物联网), 大幅提升性能和开发效率
  • 3
    PyODPS 安装常见问题解决
  • 4
    读取excel文件后计算指定行列笛卡儿积并写出
  • 5
    Hibernate 里一些常用操作
  • 6
    10.2-10.3 datetime与时间格式的相互转换
  • 7
    Netty重要概念介绍
  • 8
    联想确认再次裁员 称调整主要分布在海外
  • 9
    阿里2016财报：强调正全力发展云计算等为四大业务
  • 10
    STL - 常用关联容器代码 - set & multiset
  • 1
    基于SpringBoot+Vue+uniapp的民宿预订系统的详细设计和实现(源码+lw+部署文档+讲解等)
    41
  • 2
    《500 Lines or Less》（13）—— A 3D Modeller
    35
  • 3
    基于SpringBoot+Vue+uniapp的电子书阅读器系统的详细设计和实现(源码+lw+部署文档+讲解等)
    29
  • 4
    基于SpringBoot+Vue的母婴全程服务管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    34
  • 5
    基于SpringBoot+Vue的招投标管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    31
  • 6
    基于SpringBoot+Vue的失物招领系统的详细设计和实现(源码+lw+部署文档+讲解等)
    29
  • 7
    基于SpringBoot+Vue的高校科研信息管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    28
  • 8
    基于SpringBoot+Vue+uniapp的电影信息推荐APP的详细设计和实现
    31
  • 9
    基于SpringBoot+Vue+uniapp的课程考勤及作业提交App的详细设计和实现
    25
  • 10
    基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考