每次我打開它時，下面的影片都會將 cpu 啟動到極限。它基本上有 3 張帶有放大和淡入影片的英雄幻燈片。我有兩個問題：
為什么它讓 CPU 陷入如此多的困境，解決方法是什么？
該影片在 Firefox 中運行良好，但在 Safari 中無法正常運行。有很多小故障，不正確的淡入淡出更改等。為什么它在 Safari 中不起作用以及如何修復它。
感謝您提前回答。
*{
margin:0;
padding:0;
transition: all 0.3s ease;
}
body {
background: #333;
color: #ccc;
position: relative;
}
.slide {
border: 2px solid #555;
height: 100vh;
width: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
animation: fade 31s linear infinite;
-webkit-animation: fade 31s linear infinite;
}
..slide:nth-child(1),
.slide img:nth-child(1) {
animation-delay: 0s;
}
.slide:nth-child(2),
.slide img:nth-child(2) {
animation-delay: 10s;
}
.slide:nth-child(3),
.slide img:nth-child(3) {
animation-delay: 20s;
}
.slide img {
/* object-fit: cover; */
height: 100%;
width: 100%;
animation: zoom 31s linear infinite;
-webkit-animation: zoom 31s linear infinite;
}
.slide .text {
margin: 0.3rem;
padding: 1.5rem;
position: absolute;
background-color: rgba(0,0,0,0.7);
width: 50%;
top: 50%;
border-radius: 1rem;
}
@keyframes fade {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
@keyframes zoom {
from {
transform: scale(1.0)
}
to {
transform: scale(1.3)
}
}
@-webkit-keyframes fade {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
@-webkit-keyframes zoom {
from {
transform: scale(1.0)
}
to {
transform: scale(1.3)
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="slide">
<img src="1.jpg" alt="">
<div class="text">
<h1>First</h1>
<p>Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia.</p>
</div>
</div>
<div class="slide">
<img src="2.jpg" alt="">
<div class="text">
<h1>Second</h1>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<div class="slide">
<img src="3.jpg" alt="">
<div class="text">
<h1>Third</h1>
<p>Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<script src="main.js"> </script>
</body>
</html>uj5u.com熱心網友回復：
transition開啟*意味著每當整個檔案中的任何CSS 更改為另一種狀態時，CPU 都會自動計算in-between-steps. :hover例如，它對于狀態更改非常方便。但是，對所有事物進行過渡是有風險的！
在您的情況下，您還放置了animation一個元素，它還計算元素的影片幀。然后transition注意到某些事情發生了變化并嘗試計算更多關鍵幀。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/497587.html