Введение в использование clip-path в CSS3

внешний интерфейс игра SVG Firefox
Введение в использование clip-path в CSS3

1. Основные понятия

При обновлении динамического пространства QQ обнаруживается реклама. Когда пользователь перемещается вверх и вниз по динамическому списку, рекламное изображение будет автоматически переключаться. Этот эффект, несомненно, является очень тонким соображением для маленького экрана мобильного терминала. достигнутый эффект?

Вы можете нажать здесь:Космическая реклама QQ показывает демонстрацию

Далее поговорим о конкретной реализации этого эффекта:

  1. Расположите два изображения и сложите их вместе относительно контейнера изображений;
  2. Выберите центр круга в верхнем левом или правом нижнем углу контейнера изображения, нарисуйте круг и постоянно увеличивайте радиус круга, чтобы отобразить второе изображение;
  3. При смахивании вверх и вниз радиус круга динамически изменяется в зависимости от скорости скольжения;
  4. Когда расстояние между контейнером изображений и верхней или нижней частью экрана равно 0, порядок размещения изображений и положение центра круга соответственно изменяются.

Рисуя круг на картинке, почему может отображаться вторая картинка? Сказав это, я должен поговорить о клип-пути нашего главного героя сегодня, цитируя описание на MDN:

Свойство clip-path создает область отсечения, в которой может отображаться только часть элемента. Часть внутри области отображается, а часть вне области скрыта. Область отсечения — это путь, определяемый встроенным URL-адресом или внешним svg, на который ссылаются, или фигурой, такой как circle(). Свойство clip-path заменяет устаревшее свойство clipping clip.

Значение clip-path — это путь отсечения.Через указанный закрытый путь или форму или даже форму, определенную тегом clipPath в SVG, некоторые области, которые необходимо зарезервировать, обрезаются, так что реализация макета на веб-странице может быть разнообразным.

До появления clip-path свойство clip в CSS2.1 также имело эффект отсечения, но оно поддерживало только прямоугольники и влияло только на элементы с position:absolute или position:fixed , Использование выглядит следующим образом:

clip: rect(60px, 60px, 60px, 60px); // 标准写法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐浏览器

Примечание. Порядок параметра rect: сверху, справа, снизу, слева.

Все основные браузеры поддерживают свойство clip, и оно по-прежнему имеет свое место в отображении Sprite (CSS Sprite), но из-за ограничений свойства clip клип был заменен на clip-path. В обычной разработке мы можем использовать такие атрибуты, как border и border-radius, для создания простых шаблонов, таких как треугольники, круги или прямоугольники со скругленными углами.Интересный шаблон.

2. Практика использования

Свойство clip-path может вырезать много графики, круга, эллипса, многоугольника, вставки, а также может использовать тег clipPath анимации и SVG.

  • круг круг
clip-path: circle(25% at 50% 50%);
  • овальный эллипс
clip-path: ellipse(25% 25% at 50% 50%);
  • inset
clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
  • многоугольник
clip-path: polygon(50% 0, 25% 50% ,75% 50%);

Вы можете нажать здесь:clip-path указывает демо

  • url
<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0;480;0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>

.contract {
  clip-path: url(#clip02);
  z-index:1;
}

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

совместимость

В настоящее время ни IE, ни Edge не поддерживают это свойство. Firefox только частично поддерживает clip-path, что означает, что поддерживаются только формы и URL(#path) встроенный синтаксис SVG. Chrome, Safari и Opera требуют, чтобы префикс -webkit- был совместим с этим свойством. Внешние формы SVG не поддерживаются. Для получения дополнительной информации о совместимости, пожалуйста, нажмите здесьсовместимость браузера clip-path.

3. Сводка опыта

Используя встроенный SVG-метод URL(#path), мы можем легко обрезать сложные формы, а также включить некоторые яркие анимационные эффекты, такие как добавление веерной маски к обратному отсчету ставок в игре в покер или добавить прогресс обратного отсчета на край прямоугольника, анимация загрузки и т. д. могут быть умело реализованы с помощью атрибута clip-path, и в то же время относительная единица может гибко использоваться при использовании атрибута clip-path для вырезания графики.

4. Справочная ссылка

Категории