CSS-переходы, внешняя форма и сопоставимость браузера - PullRequest
Новая
       64

CSS-переходы, внешняя форма и сопоставимость браузера

0 голосов
/ 17 октября 2019

Я собрал воедино несколько вещей (shape-outside, fadein и переходы) в JS Fiddle для достижения цели, у меня это работает, но я хочу знать, можно ли улучшить мой код или у меня есть какой-либо ненужный код,Также доступность и совместимость с браузером является фактором, но поскольку эти два div-а являются чисто декоративными, их не нужно видеть программам чтения с экрана или всем браузерам.

Мои цели: 1) При загрузке страницы будет отображаться большое изображение.

2) Это же изображение отображается в меньшем элементе div с использованием shape-outside. Текст обтекает эту форму

Большой круг сокращается при загрузке страницы и, по-видимому, должен исчезнуть или превратиться в маленький круг, если он исчезает. Если я прав, это должны быть два отдельных элемента, поскольку первый долженбыть абсолютно позиционированным, а второе должно быть плавающим.

Можно ли сделать этот код более узким, доступным или проверить совместимость браузера? Я не уверен, работает ли он вообще в IE. Мне нужно, чтобы маленький круг начинался с непрозрачностью 100%, а большой круг скрыт или с непрозрачностью 0% для любых браузеров, которые не могут отображать большой круг или выполнять переходы. Каков наилучший способ сделать это?

Вот мой CSS: 

 .parent {
  width: 80%;
  height: auto;
  position: relative;
}

.circle {
  opacity: 0;
  background-image: url("https://i.postimg.cc/mgrWhpCf/3D-Link.png");
  background-size: 100% 100%;
  -webkit-transition: opacity 4s ease-in 2s;
  -moz-transition: opacity 4s ease-in 2s;
  -o-transition: opacity 4s ease-in 2s;
  -ms-transition: opacity 4s ease-in 2s;
  transition: opacity 4s ease-in 2s;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  float: left;
  shape-outside: circle();
  -webkit-shape-margin: 20px;
  shape-margin: 20px;
  margin: 20px;
}

.circle.show {
  opacity: 1;
}

.overlay {
  width: 50vw;
  height: calc((100vw) * 0.5);
  max-width: 500px;
  max-height: 500px;
  background-image: url("https://i.postimg.cc/mgrWhpCf/3D-Link.png");
  background-size: 100% 100%;
  border-radius: 50%;
  margin: auto;
  position: fixed;
  margin-left: 25%;
  margin-right: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition-property: width height left top;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height left top;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
  shape-outside: circle();
}

.overlay1 {
  width: 0;
  height: 0;
  border-radius: 50%;
  left: 100px;
  top: 100px;
  position: absolute;
  -webkit-transition-property: width height left top;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height left top;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
  margin: 20px;
}

и jquery: 

 $(document).ready(function() {
  $('#change').toggleClass('overlay1');
  $(".circle").addClass("show");
});

JS Fiddle

Спасибо!

...