Сводка фактического боя CSS3 (с исходным кодом)

CSS

Эта статья следует за предыдущей статьейИспользуйте css3, чтобы реализовать фоновую анимацию потрясающего интервьюера (расширенный исходный код)Продолжение этой статьи также является моей последней статьей, знакомящей с навыками CSS3, потому что знание CSS не очень сложно, а скорее знакомство с новыми функциями и базовыми теоретическими знаниями CSS3. Таким образом, цель написания этой статьи состоит в том, чтобы, с одной стороны, обобщить некоторые продвинутые навыки работы с CSS в моей работе, а также надеяться научить вас некоторым практическим навыкам и способам эффективной разработки CSS, чтобы повысить эффективность работы.

мы узнаем

  • Расширенное применение box-shadow
  • Сделать адаптивный эллипс
  • Чистый CSS3 реализует анимацию прогресса круговой диаграммы
  • Используйте границу для реализации стиля диалога
  • Простое применение фильтра css3
  • Псевдоэлементы CSS3 реализуют настраиваемые флажки
  • Инструмент для создания css3 анимации онлайн

текст

1. Расширенное применение box-shadow

Использование новых возможностей css3 может помочь нам добиться различных неожиданных спецэффектов.В следующих нескольких случаях мы будем использовать box-shdow css3 для достижения этого, давайте начнем прямо сейчас!

Реализовать анимацию волн на воде

Точка знаний: box-shadow

Подумайте, как мы можем добиться анимации диффузии водяных волн, если не будем использовать CSS3? Нужно написать много js для достижения следующих эффектов:

Основной код реализации CSS3

<style>
.wave {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 2px solid #fff;
  text-align: center;
  line-height: 100px;
  color: #fff;
  background: #06c url(http://p3g4ahmhh.bkt.clouddn.com/me.jpg) no-repeat center center;
  background-size: 100%;
  animation: wave 4s linear infinite;
}       
@keyframes wave {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 0 rgba(250, 189, 189, 1);
    }
    100% {
        box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
    }
}
</style>
<div class="wave"></div>

Здесь мы в основном используем многоуровневую тень box-shadow для достижения этого. Мы используем @keyframes в части анимации. Это нормально?

Реализовать анимацию загрузки

Точка знаний: мульти-тень box-shadow

Вы должны быть знакомы с загрузкой анимации.Хотя вы можете добиться загрузки анимации многими способами, такими как использование псевдоэлементов, использование gif и использование js, я думаю, что более элегантной реализацией является прямое использование css:

Основной код выглядит следующим образом:

<style>
.loading {
  margin-left: auto;
  margin-right: auto;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: transparent;
  animation: load 3s linear infinite;
}       
@keyframes load {
    0% {
        box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                    inset 0 0 0 15px rgba(250, 189, 189, 0),
                    40px 0 0 rgba(250, 189, 189, 0);
    }
    30% {
        box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
                    inset 0 0 0 15px rgba(250, 189, 189, 0),
                    40px 0 0 rgba(250, 189, 189, 0);
    }
    60% {
        box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                    inset 0 0 0 15px rgba(250, 189, 189, 1),
                    40px 0 0 rgba(250, 189, 189, 0);
    }
    100% {
        box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
                    inset 0 0 0 15px rgba(250, 189, 189, 0),
                    40px 0 0 rgba(250, 189, 189, 1);
    }
}
</style>
<div class="loading"></div>

Мы также используем мультифон box-shadow для достижения этого здесь, что также является направлением, о котором я думал в то время.Что касается других решений CSS, вы можете связаться со мной.

Реализуйте неправильную проекцию диалоговых окон и диалоговых окон

База знаний: фильтр и псевдоэлементы

Это предполагает знание фильтров css, но это также очень просто. Вы можете понять это, заглянув на официальный сайт css3. Давайте посмотрим на эффект непосредственно:

Мы будем использовать тень фильтра, чтобы получить тень неправильной формы, а затем использовать псевдоэлемент и границу, чтобы получить треугольник головы:

<style>
.odd-shadow{
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 80px;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    background: #06c;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))
}
.odd-shadow::before{
    content: '';
    position: absolute;
    display: block;
    margin-left: -20px;
    transform: translateY(20px);
    width:0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #06c;
}
</style>

<div class="odd-shadow">哎呦，猪先森</div>

эффект размытия

Точка знаний: фильтр

Это относительно просто, здесь я прямо над картинкой и кодом:

filter: blur(20px);

2. Сделайте адаптивный эллипс

Появление border-radius позволяет нам с большим удобством реализовать эффект закругленных углов.Мы также можем добиться различных графических эффектов путем дальнейшего исследования характеристик Border-radius.Давайте посмотрим на его мощь!

Точка знаний: border-radius: a / b; //a, b — горизонтальный и вертикальный радиусы закругленных углов соответственно,Если единицей измерения является %, это означает, что разрешение зависит от ширины и высоты.

Основной код:

<style>
.br-1{
  width: 200px;
  height: 100px;
  border-radius: 50% /10%;
  background: linear-gradient(45deg,#06f,#f6c,#06c);
}
.br-2{
  width: 100px;
  border-radius: 20% 50%;
}
.ani{
  animation: skew 4s infinite;
}
.ani1{
  animation: skew1 4s infinite 2s;
}
.ani2{
  animation: skew2 4s infinite 3s;
}
@keyframes skew{
  to{
    border-radius: 50%;
  }
}
@keyframes skew1{
  to{
    border-radius: 20px 20px 100%;
  }
}
@keyframes skew2{
  to{
    transform: rotate(360deg);
  }
}
</style>
<div class="br-1 black-theme"></div>
<div class="br-1 black-theme ani"></div>
<div class="br-1 black-theme ani1"></div>
<div class="br-1 br-2 black-theme ani2"></div>

Здесь мы в основном используем фоновые градиенты для получения яркого фона и радиус границы для получения различных овальных узоров.

3. Чистый CSS3 реализует анимацию прогресса круговой диаграммы

Точки знаний: радиус границы: a b c d / e f g h, анимация несколько свойств анимации;

Эффект следующий:

Основной код:

<style>
.br-31{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right,#f6c 50%,#333 0);
}
.br-31::before{
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: #f6c;
  transform-origin: left;
  animation: skin 4s linear infinite,
             bg 8s step-end infinite;
}
@keyframes skin{
  to{
    transform: rotate(.5turn);
  }
}
@keyframes bg{
  50%{
    background: #333;
  }
}
.br-32::before{
  animation-play-state: paused;
  animation-delay: inherit;
}
</style>
<div class="br-31 black-theme"></div>
<div class="br-31 br-32 black-theme" style="animation-delay:-1s"></div>

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

4. Псевдоэлементы CSS3 реализуют настраиваемые флажки

Мы все знаем, что собственный стиль управления флажками чрезвычайно сложно настроить, что значительно усложняет инженерам реализацию эскизов проекта. С появлением CSS3 был добавлен селектор :checked, поэтому мы можем использовать :checked и label для реализации различных элементов управления выбором формы.Давайте посмотрим, как это реализовать!

Давайте посмотрим, как реализовать приведенный выше настраиваемый флажок:

<style>
.check-wrap{
    text-align: center;
}
.checkbox{
    position: absolute;
    clip: rect(0,0,0,0);
}
.checkbox[type="checkbox"]:focus + label::before{
    box-shadow: 0 0 .6em #06c;
}
.checkbox[type="checkbox"] + label::before{
    content: '\a0'; /* 不换行空格 */
    display: inline-block;
    margin-right: .3em;
    width: 2em;
    height: 2em;
    border-radius: .3em;
    vertical-align: middle;
    line-height: 2em; /* 关键 */
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: gray;
}
.checkbox[type="checkbox"]:checked + label::before{
    content: '\2713'; /* 对勾 */
    background: black;
}

label{
    margin-right: 40px;
    font-size: 20px;
}
</style>
<div class="check-wrap">
    <input type="checkbox" class="checkbox" id="check-1" />
    <label for="check-1">生男孩</label>
    <input type="checkbox" class="checkbox" id="check-2" />
    <label for="check-2">生女孩</label>
</div>

Здесь, чтобы скрыть нативную комнату управления флажком, мы используем clip: rect(0,0,0,0) для перехвата, а затем используем псевдокласс checkbox:checked для достижения взаимодействия.

Далее расширимся, реализуем пользовательский переключатель:

Принцип здесь тот же, но изменен стиль, и непосредственно добавлен код:

<style>
.check-wrap{
    margin-bottom: 20px;
    text-align: center;
}
.switch{
    position: absolute;
    clip: rect(0,0,0,0);
}

.switch[type="checkbox"] + label{
    width: 6em;
    height: 3em;
    padding: .3em;
    border-radius: .3em;
    border: 1px solid rgba(0,0,0,.2);
    vertical-align: middle;
    line-height: 2em; /* 关键 */
    font-size: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 1px white inset;
    background-color: #ccc;
    background-image: linear-gradient(#ddd,#bbb);
}
.switch[type="checkbox"]:checked + label{
    box-shadow: 0.05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

label{
    margin-right: 40px;
    font-size: 14px;
}

.switch-an{
    position: absolute;
    clip: rect(0,0,0,0);
}

.switch-an[type="checkbox"] + label{
    position: relative;
    display: inline-block;
    width: 5em;
    height: 2em;
    border-radius: 1em;
    color: #fff;
    background: #06c;
    text-align: left;
}

.switch-an[type="checkbox"] + label::before{
    content: '';
    width:2em;
    height: 2em;
    position: absolute;
    left: 0;
    border-radius: 100%;
    vertical-align: middle;
    background-color: #fff;
    transition: left .3s;
}
.switch-an[type="checkbox"] + label::after{
    content: 'OFF';
    margin-left: 2.6em;
}
.switch-an[type="checkbox"]:checked + label::before{
    transition: left .3s;
    left: 3em;
}
.switch-an[type="checkbox"]:checked + label::after{
   content: 'NO';
   margin-left: .6em;
}

</style>
<div class="check-wrap">
    <input type="checkbox" class="switch" id="switch-1" />
    <label for="switch-1">生男孩</label>
    <input type="checkbox" class="switch" id="switch-2" />
    <label for="switch-2">生女孩</label>
</div>

<div class="check-wrap">
    <input type="checkbox" class="switch-an" id="switch-an-1" />
    <label for="switch-an-1"></label>
</div>

Считаете ли вы, что CSS3 обеспечивает более мощные возможности анимации и настройки? На самом деле, мы можем добиться более крутых и практичных эффектов, которые ждут вас, чтобы попробовать.

5. Инструмент для создания css3 анимации онлайн

Наконец, я рекомендую инструмент для создания различных кривых Безье онлайн, который я часто использую при создании анимации:cubic-bezier.

наконец

Автор запустит CMS с открытым исходным кодом через 2 дня.Техническая архитектура выглядит следующим образом:

  • Бэкэнд-узел+Коа+redis+JsonSchema
  • Фоновый интерфейс управления vue-cli3 + vue + ts + vuex + antd-vue + axios
  • Клиентский интерфейс react + antd + react-hooks + axios

Идея дизайна, архитектура и процесс реализации системы будут представлены позже.Приглашаем ознакомиться с более подробным введением в паблике «Интересный интерфейс».

Мы приглашаем всех учиться друг у друга и вместе исследовать границы интерфейса.

больше рекомендаций

Категории