Итак, основная проблема заключается в попытке анимировать два фоновых изображения. Я не нашел какой-либо известной ошибки с «Safari» + «несколько изображений», но, как мы видим, она работает не так, как ожидалось. Если вы удалите lo go из этой анимации, это будет работать в Safari, но это не то, что я бы назвал «приемлемым».
Примерно так:
66% {
background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");
}
Некоторые другие указатели:
1. Анимируйте только то, что меняется, и переместите общий материал в главный селектор css. Значения, которые вы добавляете в 0 и 100%, будут применяться только там, но я думаю, что вы хотите, чтобы они были общими для всех состояний. Так что лучше в .container
: (
.container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 16s ease-in-out infinite;
background-size: cover;
}
@keyframes animate{
0%,100%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");
height: 100%;
-webkit-appearance: textfield;
background-position: center;
background-repeat: no-repeat;
background-size: 65%, cover;
}
33%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");
}
66%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");
}
}
:)
.container{
position: absolute;
left: 0;
top: 0;
width: 100%;
animation: animate 16s ease-in-out infinite;
background-size: cover;
height: 100%;
-webkit-appearance: textfield;
background-position: center;
background-repeat: no-repeat;
background-size: 65%, cover;
}
@keyframes animate{
0%,100%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");
}
33%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");
}
66%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");
}
}
Якоря должны переносить
div s, когда используется только текст. Это мой уклон, но ваш HTML получил этот дивит.
: (
<a href="#news">
<div class="item">
live dates
</div>
</a>
:)
<a href="#news" title="Some helpful title" class="item">live dates</a>
или
<a href="#news" title="Some helpful title"><span class="item">live dates</span></a>
Кроме того, запустите ваш CSS через какой-либо вид автоприставки в надежде на лучшую кросс-браузерную поддержку. Я фанат:
https://autoprefixer.github.io/ Я перестроил это так, как сделал бы это, что включало в себя все до некоторой степени. Надеюсь, это поможет вам на вашем пути. Это полностью предвзято, яда, яда, но я думаю, что это достигнет ваших целей, и вы можете построить это.
// This just creates a timer to change the data-background of the body
window.setInterval(function(){
var currentBackground = document.body.getAttribute("data-background") * 1,
nextBackground = currentBackground + 1;
if (currentBackground >= 3) {
nextBackground = 1;
}
document.body.setAttribute("data-background", nextBackground);
}, 5000);
// menu controls
var toggleMenu = document.querySelector(".topnav");
var toggleMenuButton = toggleMenu.querySelector(" button");
var toggleMenuState = function (evt) {
evt.preventDefault();
var currentState = toggleMenu.getAttribute("data-state");
if (currentState === "closed") {
toggleMenu.setAttribute("data-state", "open");
} else {
toggleMenu.setAttribute("data-state", "closed");
}
};
toggleMenuButton.addEventListener("click", toggleMenuState);
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
body {
height: 100vh;
margin: 0;
}
body {
font-family: Helvetica;
color: white;
font-weight: bold;
font-style: normal;
font-size: 30px;
}
.topnav {
position: fixed;
top: 0;
left: 0;
list-style: none;
z-index: 3;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.topnav .logo img {
border-radius: 100px;
}
.topnav button {
display: none;
}
.topnav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.topnav li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.topnav a,
.topnav button {
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: white;
font-weight: bold;
font-style: normal;
font-size: 40px;
}
.topnav button {
border: inherit;
background: inherit;
cursor:pointer;
}
.topnav button:before {
content: "» ";
margin-right: 0.25em;
}
.topnav[data-state="open"] button:before {
content: "x ";
}
.topnav a:hover,
.topnav button:hover {
background-color: black;
border-radius: 100px;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.gallery {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
margin: 0;
padding: 0;
}
.gallery li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
-webkit-transition: opacity 2.0s ease-in-out 0.0s;
-o-transition: opacity 2.0s ease-in-out 0.0s;
transition: opacity 2.0s ease-in-out 0.0s;
}
.gallery li:nth-child(1) {
background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");
}
.gallery li:nth-child(2) {
background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");
}
.gallery li:nth-child(3) {
background-image: url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");
}
[data-background="1"] .gallery li:nth-child(1),
[data-background="2"] .gallery li:nth-child(2),
[data-background="3"] .gallery li:nth-child(3) {
opacity: 1;
}
.hero {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png") rgba(0,0,0,0.15) center center no-repeat;
background-size: 65%;
}
@media screen and (max-width: 1200px) {
.topnav {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.topnav button {
display: inherit;
}
.topnav ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
top: 100%;
right: 0;
margin: 0;
padding: 0;
}
.topnav ul li {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.topnav[data-state="closed"] ul {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showzatheband</title>
<link rel='icon' href='favicon.ico' type='image/x-icon'>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body data-background="1">
<menu class="topnav" data-state="closed">
<a href="/" title="Homepage" class="logo"><img src="https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showzafavcon.jpg" alt="showza_icon" width="125" height="125" /></a>
<button>menu</button>
<ul>
<li><a href="#news" class="item">live dates</a></li>
<li><a href="#news" class="item">gallery</a></li>
<li><a href="#news" class="item">news</a></li>
</ul>
</menu>
<div class="hero"></div>
<ul class="gallery">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>