html - 悬停时的线条边框动画
问题描述
我以前没有见过这种微妙的效果,我想知道是否可以只在 html5/css 中悬停时做这个边框动画。您还发现了其他漂亮的悬停动画效果吗?
解决方案
您可以使用 ":hover" 示例执行此操作: elemnt:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cool animation</title>
<style>
.test1 {
/* Just centering the text */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* adding transition */
transition: 0.6s all;
}
/* using the hover method */
.test1:hover {
/* here you can specify whatever you want */
border: 2px solid black;
}
</style>
</head>
<body>
<h2 class="test1">test</h2>
</body>
</html>
推荐阅读
- string - 使用 Stream API 比较两个字符串并计算差异
- swift - 如何创建下拉菜单
- php - 从 Wordpress 搜索中排除多个自定义分类术语
- python - 谁能帮我我的代码有什么问题?
- c# - C# Entity Framework 递归层次结构查询
- android - 从 html 为旧的 android 设备创建 pdf
- android - 如何访问使用Retrofit2获取的android中JSON响应中键内键的值?
- jasper-reports - Jasper HTML 输出宽度问题
- java - hibernate 为表名添加前缀,因此找不到它
- python - 了解 iter() 是如何工作的,不会调用对象的 __iter__()