CSS — формы должны быть такими, какие вы хотите

CSS
CSS — формы должны быть такими, какие вы хотите

последовательность

Говоря оdivформа, в общем то, что приходит на ум圆形или方形, эти две формы фактически встретились с передним концом95%сценарии применения (95%Откуда взялись данные - -!), но как программист, который не хочет следовать за толпой, все дело в том, чтобы делать вещи.

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

image

(图片来源于网络) Конечно же, наше творчество ограничивает не воображение, а совместимость. Версия, которая поддерживает браузер, находится на высокой стороне.Если вы работаете над серьезным проектом или не рекомендуется, если это ваш собственный или относительно модный проект, то начните его! (道路千万条，兼容第一条。尝鲜有风险，翻车两行泪。). Не забудьте добавить-webkit-clip-path: polygon()

Несколько мелких дел, чтобы принести их в жертву небесам

  1. круглый=>арбуз

clip-path: polygon(100% 100% , 0 100% , 50% 0 );

image

  1. квадратный=>треугольник

clip-path: polygon(0 0 , 0 100% , 100% 50% );

image

  1. квадратный=>стрела

clip-path: polygon(100% 50% , 0 100% , 50% 50% , 0 0);

image

  1. Овал=>Алмаз

clip-path: polygon(50% 100% , 100% 10% , 0 10%);

image

анализироватьclip-path:polygon()

Сначала нарисуйте диаграмму анализа на основе приведенного выше треугольника.

image

Вы можете видеть, что скобки состоят из пары значений. В текущем div, соответствующемxа такжеyкоординаты, принимающие подразделенияpxили%(Рекомендуемый процент), разделенные запятыми, значение, написанное после запятой, представляет собой новую точку, новая точка будет соединена с исходной точкой, чтобы сформировать линию, и количество точек не ограничено.

Два вопроса:
  1. Как только точек становится больше, координаты складываются. Нелегко изменить глаза.
  • Поскольку вы сделали внешний интерфейс, вы, должно быть, овладели искусством экстрасенса:

image

火狐在这个属性的调试上有很好的支持

image

点击属性旁边的图标，线条就可以随意拖动了，会随着你是`%`还是`px`自动进行调整
  1. Точки и точки могут быть соединены только прямой линией, поэтому, если я хочу нарисовать фигуру с дугой, мне нужно построить бесчисленное количество точек.

  • К сожалению, хотя этот атрибут также имеет соответствующий кружокclip-path:circle()эллипсclip-path: ellipse()Но оба нельзя использовать одновременно. И поскольку это свойство обрезается, пока оно превышает диапазон строки, оно будет обрезано, поэтому попробуйте использовать::afterили::beforЗаполнение дуги, эффект неудовлетворительный, обратитесь к этому арбузу.

    image

  • Еще минус в том, что лишняя часть отображаться не будет, а обычная box-shadow строится на основе тени этого box, а естественная тень тоже обрезается.

    image

    Значит надо датьbox-shadowдобавить внутреннюю теньbox-shadow: inset 3px 2px 16px #bbb;(Но тень будет формироваться не по вашим линиям, она все же по боксу, так что вопрос использования)

анализироватьclip-path:circle()а такжеclip-path: ellipse()

clip-path:circleОн используется для резки кругов, и устройство также поддерживаетсяpxа также%, который предоставляет три параметра(圆形半径 at x方向坐标 y方向坐标)

image

clip-path: ellipseОтличие от приведенного выше в том, что он разбивает радиус круга наx方向的半径/y方向的半径

image

анимация

clip-path имеет хорошую поддержку анимационных переходов, вот небольшая демонстрация

image

.demo_box{
    width: 100px;
    height: 100px;
    border-radius:50%;
    background:#ffa700;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 25%, 50% 50%, 0% 80%);
    animation:a 1s infinite alternate;
}
@keyframes a {
    0%, 10% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 25%, 50% 50%, 0% 80%)
    }
    90%, 100% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 50%, 60% 50%, 0% 60%)
    }
}

соответствоватьshape-outsideвставлять графику в текст

shape-outsideа такжеclip-pathвсе имеют соответствующиеpolygon,circle,ellipseИх соответствующие параметры одинаковы, и для вступления в силу элемент div должен быть плавающим.

image

Бесплатное сканирование QR-кода CSS-анимации

Полосы на маршруте — это проблема Snipping Tool, которой на самом деле нет.

image

<div class="scan"></div>

.scan {
  width: 150px;
  height: 150px;
  margin: 30px auto;
  position: relative;
  background: linear-gradient(to left, #108EE9, #108EE9) left top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left top no-repeat, linear-gradient(to left, #108EE9, #108EE9) right top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) right top no-repeat, linear-gradient(to left, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat;
  background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}

.scan::after {
  content: '';
  width: 140px;
  border: 1px solid #BBE2FF;
  position: absolute;
  left: 5px;
  top: 2px;
  animation: myfirst 4s infinite;
}
@keyframes myfirst {
  from {
    top: 2px;
  }
  to {
    top: 144px;
  }
}
Категории