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

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

/*

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