代码之家 › 专栏 › 技术社区 › Robin

在悬停时设置css边框半径,悬停时使用转场1s

css html

-1

Robin · 技术社区 · 6 年前

我有一个按钮。悬停时增加它的宽度,并以1s的过渡改变边界半径。但是悬停时边界半径立即设置为初始值(在本例中为50%)。我想等待1s,然后设置边界半径50%时悬停。

.profile-avatar-change {
  font-size: 1.8rem;
  color: #ffffff;
  background: linear-gradient(#fd1999, #a60fe7);
  border-radius: 50%;
  padding: 5px;
}

.profile-avatar-change:hover {
  border-radius: 6px;
}

.profile-avatar-change:hover .hover-text {
  opacity: 1;
  width: auto;
  max-width: 50rem;
}

.profile-avatar-change .hover-text {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  visibility: none;
  width: auto;
  max-width: 0px;
  opacity: 0;
  text-align: center;
  transition: all 1s;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<a src="https://codepen.io/robin3317/pen/zYYwxEB/license">MIT License</a> <br><br>

<a class="profile-avatar-change" href="#">
  <i class="fa fa-pencil"></i>
  <span class="hover-text">Edit Profile Picture</span>
</a>

Here is codepen demo (我使用scss作为css pre)

2 回复 | 直到 6 年前

Ori Drori 6 年前

您可以添加一个在项目未悬停时操作的延迟为1s的转换:

.profile-avatar-change:not(:hover) {
  transition: border-radius 1s 1s;
}

演示:

.profile-avatar-change {
  font-size: 1.8rem;
  color: #ffffff;
  background: linear-gradient(#fd1999, #a60fe7);
  border-radius: 50%;
  padding: 5px;
}

.profile-avatar-change:hover {
  border-radius: 6px;
}

.profile-avatar-change:not(:hover) {
  transition: border-radius 1s 1s;
}

.profile-avatar-change:hover .hover-text {
  opacity: 1;
  width: auto;
  max-width: 50rem;
}

.profile-avatar-change .hover-text {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  visibility: none;
  width: auto;
  max-width: 0px;
  opacity: 0;
  text-align: center;
  transition: all 1s;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<a src="https://codepen.io/robin3317/pen/zYYwxEB/license">MIT License</a> <br><br>

<a class="profile-avatar-change" href="#">
  <i class="fa fa-pencil"></i>
  <span class="hover-text">Edit Profile Picture</span>
</a>

Manikandan2811 6 年前

我想这行得通。请尝试这个代码..

CSS

.profile-avatar-change {
  transition: all 1.1s;
}
.profile-avatar-change:hover {
  transition: all 1s;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前