个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我试图在悬停时缓和三 Angular 形，例如使不透明度更轻，并在 4 秒左右后使其不透明度 = 1。这可能吗？如果是怎么办？
nav a:hover:after {
content: "";
display: block;
border: 8px solid #405580;
border-bottom-color: #fff;
position: absolute;
left:33%;
margin-top: 23px;
}
我附上了我的密码笔。请指教:https://codepen.io/anon/pen/awOZZz
最佳答案
您可以添加@Santi 编写的代码。
nav a::after {
content: "";
display: block;
opacity: 0;
transition: opacity 4s;
}
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555 margin: 0;
}
a {
color: #FFF;
text-decoration: none;
font-weight: bold;
position: relative;
}
a:hover {
color: #FFF;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
nav {
float: right;
padding: 35px 20px 0 0;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
nav a::after {
content: "";
display: block;
opacity: 0;
transition: opacity 4s;
}
nav a:hover::after {
content: "";
display: block;
border: 8px solid #405580;
border-bottom-color: #fff;
position: absolute;
left: 33%;
margin-top: 23px;
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Adatia.co.uk</title>
<meta content="width=divice-width, initial-scale=1.0" name="viewport">
<link href="NewFile.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li>
<a class="current" href="#">Home</a>
</li>
<li>
<a href="#">Page1</a>
</li>
<li>
<a href="#">Page2</a>
</li>
<li>
<a href="#">Page3</a>
</li>
<li>
<a href="#">Page4</a>
</li>
<li>
<a href="#">Page5</a>
</li>
</ul>
</nav>
</header>
</body>
</html>关于html - CSS On hover 缓和/淡入三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44392910/
26
4
0
我是一名优秀的程序员,十分优秀！