我正在制作我的第一个网站并陷入困境。在页面加载时，我有动画(元素下降到适当的位置)，但我也有:悬停比例。所以动画现在可以工作，但是当我悬停时它不会放大。我正在寻找的结果是页面加载元素下降，然后当您将鼠标悬停在它们上时它们会放大。
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
transition: transform, scale 2s;
transform: translateY(-80px);
animation: come-in 2s;
animation-fill-mode: forwards;
}
top-header h1:hover {
transform: scale(1.05);
}
@keyframes come-in {
to {transform: translateY(0);}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title>Li-designs</title>
<meta name="description" content="Ignas Levinskas is young designer and web developer.">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"?>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:200,400,600,800" rel="stylesheet">
</head>
<body>
<header>
<div class="overlay">
<top-header>
<h1>Ignas Levinskas</h1>
<social-header>
<ul>
<li><a href="https://www.facebook.com/Ignasbelenkacia" target="_blank"><i class="fa fa-facebook" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.instagram.com/burn_them_with_fire/" target="_blank"><i class="fa fa-instagram" style="color:white" aria-hidden="true"> </i></a></li>
<li><a href="https://www.behance.net/li-designs" target="_blank"><i class="fa fa-behance" style="color:white" aria-hidden="true"> </i></a></li>
</ul>
</social-header>
</top-header>
<cover-content>
<h1>Welcome</h1>
<img src="images/logo.png" alt="Ignas Levinskas designs logo">
</cover-content>
</div>
</header>
<main>
</main>
</body>
</html>最佳答案
您将规则放入了错误的类中。
我将它们重新排列如下:
top-header h1 {
text-transform: capitalize;
color:white;
font-weight: 700;
text-shadow: 10px 15px 10px rgba(0,0,0,0.6);
animation: come-in 2s;
}
top-header h1:hover {
transform: scale(1.05);
transition: scale 2s;
animation-fill-mode: forwards;
}
@keyframes come-in {
from {transform: translateY(-80px);}
to {transform: translateY(0);}
}
关于带有关键帧和悬停的 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45158916/