該影片可在我的網站www.surfturkey.net上查看
問題出現在“專案”頁面上。
我無法找到我的 CSS 影片的問題。我在 CSS 網格單元格中有一個影像。我想將它影片到頁面左上角附近的絕對位置。目前，影片會縮小并以錯誤的方向向上和向右移動，然后跳出網格單元并以所需的方向（向上和向左）移動。我不知道如何使它從起始位置平滑過渡到左上角。我還有一個直接在問題影片之前的影片，它使用變換函式和旋轉函式從左側飛入。我在課堂上有影片。這是我的 HTML 和 CSS。我正在使用 Sass，但我已將此處的代碼格式化為純 CSS。
.logo-box__logo {
transform : rotateZ(-40deg);
transform-style : preserve-3d;
width : 30rem;
height : 30rem;
}
.slidein {
animation : slide-in-from-left 1.5s ease 0s 1 normal forwards;
}
.shrink {
animation : shrink-to-top 1.5s linear 2s 1 normal forwards;
}
@keyframes slide-in-from-left {
from { transform : translateX(-1000px); }
to { transform : rotateZ(-40deg); }
}
@keyframes shrink-to-top {
from {
height : 30rem;
width : 30rem;
position : relative;
}
to {
height : 10rem;
width : 10rem;
position : absolute;
top : 2%;
left : 2%;
}
}<div class="logo-box">
<a href="index.html">
<img class="logo-box__logo shrink"
src="https://surfturkey.net/assets/img/surfturkey_right.png"
alt="A turkey on a surfboard">
</a>
</div>uj5u.com熱心網友回復：
我還是不明白為什么在logo-box. 但我希望這是你想要的。看一看。
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: content-box;
font-size: 62.5%;
}
body {
font-family: "Nunito", sans-serif;
color: #A5C9CA;
background-color: #395B64;
overflow-x: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: -webkit-min-content 20vh 70vh 100vh;
grid-template-rows: min-content 20vh 70vh 100vh;
}
.navbar {
grid-column: 2/3;
grid-row: 1/2;
font-family: "Nunito", sans-serif;
display: flex;
justify-content: flex-end;
}
.navbar__links {
font-size: 1.8rem;
text-transform: uppercase;
margin: 3rem;
}
.navbar__item {
text-decoration: none;
color: #A5C9CA;
padding: 2rem;
transition: color 1s;
}
.navbar__item:hover {
color: #C84B31;
}
.slidein {
-webkit-animation: slide-in-from-left 1.5s ease 0s 1 normal forwards;
animation: slide-in-from-left 1.5s ease 0s 1 normal forwards;
}
.shrinkup {
-webkit-animation: shrink-to-top 1.5s linear 2s 1 normal forwards;
animation: shrink-to-top 1.5s linear 2s 1 normal forwards;
}
@-webkit-keyframes slide-in-from-left {
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0) rotateZ(-32deg);
/* margin-left: 5rem; */
}
}
@keyframes slide-in-from-left {
from {
transform: translateX(-1000px);
}
to {
transform: translateX(0) rotateZ(-32deg);
/* margin-left: 5rem; */
}
}
@-webkit-keyframes shrink-to-top {
from {
transform: rotateZ(-32deg);
}
to {
width: 15rem;
height: 15rem;
position: absolute;
top: 2rem;
left: 2rem;
transform: rotateZ(-32deg);
}
}
@keyframes shrink-to-top {
from {
transform: rotateZ(-32deg);
}
to {
width: 15rem;
height: 15rem;
position: absolute;
/* top: 2rem;
left: 2rem; */
transform: rotateZ(-32deg);
}
}
.main-content {
grid-row: 4/5;
grid-column: 1/-1;
background-color: #A5C9CA;
width: 100vw;
}
.accent-font {
color: #C84B31;
}
.heading {
grid-row: 3/4;
grid-column: 2/3;
font-family: "Nunito", sans-serif;
display: flex;
flex-direction: column;
justify-self: flex-start;
margin-left: -12rem;
}
.heading__title {
font-size: 14rem;
text-align: right;
}
.heading__title a {
text-decoration: none;
}
.heading__subtitle {
font-size: 4rem;
text-align: right;
}
.logo-box {
grid-row: 1/3;
grid-column: 3/4;
}
.logo-box__logo {
width: 80rem;
height: 80rem;
position: absolute;
left: 5rem;
margin-top: 1.5%;
transform: rotateZ(-32deg);
/* border: 1px solid red; */
}/*# sourceMappingURL=main.css.map */<body class="container">
<nav class="navbar">
<div class="navbar__links">
<a class="navbar__item" href="#">Our Story</a>
<a class="navbar__item" href="projects.html">Projects</a>
<a class="navbar__item" href="#">Contact us</a>
<a class="navbar__item" href="#">Blog</a>
</div>
</nav>
<div class="logo-box">
<a href="index.html">
<img class="logo-box__logo shrinkup" src="https://www.surfturkey.net/assets/img/surfturkey_right.png" alt="A turkey on a surfboard">
</a>
</div>
<header class="heading">
<h1 class="heading__title">Come <a href="#projects"><span class="accent-font">see</span></a></h1>
<h2 class="heading__subtitle">what all we're up to...</h2>
</header>
<main id="projects" class="main-content">
</main>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514528.html
標籤：cssCSS动画