CSS анимация не работает в IE11, Windows 7 и Windows 10 - PullRequest
Новая
       3

CSS анимация не работает в IE11, Windows 7 и Windows 10

0 голосов
/ 08 декабря 2018

Я сделал анимацию, чтобы вращаться вокруг кнопки, я не очень хорошо знаю теги, поэтому у меня, вероятно, будет много ошибок в моих кодах: '(

Сегодня меня раздражает то, что этоне вращается в IE11, я тестировал в Windows 7 и Windows 10, любой браузер открывается нормально, пока Edge не работает как запрограммировано, кроме IE11,

URL-адрес рассматриваемой страницы: http://hb1virtual.com.br/Grafica/

Может кто-нибудь сказать мне, где я иду не так? (Будет много ошибок, но особенно эта, смеется) HTML 

.menu {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 340px;
	height: 340px;
	margin-left:-170px;
	margin-top:-170px;
}
.marquee{
	display: block;
	position: fixed;
	overflow: hidden;
	width: 340px;
	height: 340px;
	animation: scroll 10s linear infinite;
	-webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;
	-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
  animation-direction: reverse;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.marquee:hover {
  animation-play-state: paused;
}
.menuse {
	position: fixed;
	background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
	background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
	position: fixed;
	margin-left: 170px;
	background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
	background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
	margin-top: 170px;
	position: fixed;
	background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
	background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
	position: fixed;
	margin-top: 170px;
	margin-left: 170px;
	background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
	background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
	float: none;
	position: fixed;
	width: 224px;
	height: 224px;
	margin-top: 59px;
	margin-left: 61px;
	border-radius: 50%;
	background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menusd"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menuie"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menuid"><a href="../index.html"><img src="images/botton.png"></a></div>
</div>

CSS

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

В вашем коде анимации есть некоторые ошибки CSS.

Я пытаюсь добавить новый сегмент кода CSS и пытаюсь применить его на вашей веб-странице, чтобы он работал для IE 11.

Код: 

<!doctype html>
<head>
    <title></title>
    
   <style>
.menu {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 340px;
	height: 340px;
	margin-left:-170px;
	margin-top:-170px;
}
.marquee{
	display: block;
	position: fixed;
	overflow: hidden;
	width: 340px;
	height: 340px;
	animation: scroll 10s linear infinite;
	-webkit-animation:spin 20s linear infinite;
  	-moz-animation:spin 20s linear infinite;
  	animation:spin 20s linear infinite;
	-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
  	animation-direction: reverse;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
  animation-play-state: paused;
}
.menuse {
	position: fixed;
	background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
	background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
	position: fixed;
	margin-left: 170px;
	background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
	background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
	margin-top: 170px;
	position: fixed;
	background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
	background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
	position: fixed;
	margin-top: 170px;
	margin-left: 170px;
	background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
	background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
	float: none;
	position: fixed;
	width: 224px;
	height: 224px;
	margin-top: 59px;
	margin-left: 61px;
	border-radius: 50%;
	background: url('../images/logosombra.png') no-repeat;
}



.clockwise {
    -webkit-animation: clockwiseSpin 10s infinite linear;
    animation: clockwiseSpin 10s infinite linear;
}

@-webkit-keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
    
}@keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}	
}
</style>
</head>
<body>
  <div class="menu">
<div class="clockwise">
<div class="menuse"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menusd"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menuie"><a href="../index.html"><img src="images/botton.png"></a></div>
<div class="menuid"><a href="../index.html"><img src="images/botton.png"></a></div>
</div>
</body>
</html>

Выход в IE 11:

enter image description here

Далее вы можете попробовать проверить коди попробуйте изменить его на своем сайте.

Вы можете сослаться на приведенный ниже пример.

Пример JS Fiddle

0 голосов
/ 08 декабря 2018

Во-первых, вы должны изменить свой заголовок с португальского на английский.

Во-вторых, вы всегда можете вставить код в ваш html, заблокировав пользователей IE от просмотра вашего веб-сайта и перенаправив их для загрузки другого браузера.

Никто не использует IE в любом случае ... Это не решение проблемы, это избегание вопроса, но это решение.

Приветствия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...