0

Анимирана рамка на текст или изображение

Анимирана рамка
Здравейте всички вие, които сте на страниците на blogzablogove.com. Как да създадете анимирана рамка на текст или изображение в публикация, използвайки само CSS?
Рамките винаги се използват за украсяване на елементите на уеб страниците. Но нека видим дали и колко е лесно да им създадем ефект на анимация. Ние ще използваме свойствата outline и box-shadow. Заедно те ще създадат ефект на двуцветна пунктирана линия. Ще ви дам няколко примера, но можете да създадете и напълно уникален вариант на този ефект.




    С кое да започнем? Най-напред малко теория

    ➔Създава се обикновена пунктирана CSS рамка около текста. Стилът на рамката се определя с помощта на три свойства: ширина, стил и цвят. По този начин:


    .ramka{
        outline: 6px dashed yellow;
        box-shadow: 0 0 0 6px #EA3556;
     }


    ◾За outline трябва да се зададат width (ширина), type (стил) и color (цвят).
    ◾За box-shadow трябва да се зададат стойности, които да са същите, като тези за width и color за outline.

    ➔Създайте анимацията и я добавете към общия код.


    @keyframes animateBorder {
      to {
        outline-color: #EA3556;
        box-shadow: 0 0 0 6px yellow;
      }
    }


    А сега ето и няколко готови кодове на варианти за пунктирана рамка с анимация. Първите три варианта са за рамка около текст.

    Вариант първи


    <div class="animation-examples one">
    ваш текст
      </div>

    <style>
    .animation-examples {
      width: 600px;
      height: 120px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      font-family: cambria;
    }

    .animation-examples.one {
      color: #69D2E7;
      outline: 10px dashed #E0E4CC;
      box-shadow: 0 0 0 10px #69D2E7;
      animation: 1s animateBorderone ease infinite;
    }

    @keyframes animateBorderone {
      to {
        outline-color: #69D2E7;
        box-shadow: 0 0 0 10px #E0E4CC;
      }
    }</style>


    Вариант втори

    Заменяме свойството dashed с double, променяме ширината на рамката и сянката.


    <div class="animation-examples two">
    ваш текст<br />
    <br /></div>
    <style>

    .animation-examples {
      width: 600px;
      height: 120px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      font-family: cambria;
    }

    .animation-examples.two {
      color: #FA2A00;
      outline:12px double #F2D694;
      box-shadow: 0 0 0 8px #FA2A00;
      animation: 2s animateBorderTwo ease infinite;
    }

    @keyframes animateBorderTwo {
      to {
        outline-color: #FA2A00;
        box-shadow: 0 0 0 8px #F2D694;
      }
    }</style>


    Вариант трети 


    Можете да създадете фон в блока на рамката или даже да зададете linear-gradient.


    <div class="animation-examples three">
    Ваш текст</div>
    <style>.animation-examples.three {
      color: #BEF202;
      background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
      background-size: auto 2px;
      outline: 10px dashed #BEF202;
      box-shadow: 0 0 0 10px #1B676B;
      animation: 1s animateBorderThree ease infinite;
    }

    @keyframes animateBorderThree {
      to {
        outline-color: #1B676B;
        box-shadow: 0 0 0 10px #BEF202;
      }
    }

    #animation-examples{
      margin: 20px 10px;
    }
    </style>


    Уточнение:

    Във всичките три примера цветът на контура  се задава с помощта на outline-color (outline: 6px dashed yellow;). А цветът на сянката във втория вариант се задава чрез box-shadow: 0 0 0 8px #FA2A00;



    За избор на цвят използвайте инструмента Таблица на цветовете.


    Вариант четвърти – за изображение


    <div class="animation-photos one">
    <img src="https://lh3.googleusercontent.com/-9uoHVBtu-qU/WJCLXPZSNYI/AAAAAAAAC6c/I0vhIg5rszgPavCzH3vmtwknXXb4iGY5gCEwYBhgL/w400-h280-p/podsnezhnik1.jpg
    " alt="" />
      <br />
    <br /></div>
    <style>
    .animation-photos {
      width: 400px;
      height: 280px;

    }

    .animation-photos.one {
      color: #69D2E7;
      outline: 10px dashed #CCCC00;
      box-shadow: 0 0 0 10px #FFFF00;
      animation: 1s animateBorderone ease infinite;
    }

    @keyframes animateBorderone {
      to {
        outline-color: #FFFF00;
        box-shadow: 0 0 0 10px #CCCC00;
      }
    }</style>



    Адресът на изображението е отбелязан в синьо. Размерите му в примера са ширина (width): 400px; и височина (height): 280px;
    В примерите е използван стилът с пунктирана рамка (dashed). Но във втория от тях се опитах да направя двойна рамка (double). Ако имате желание да експериментирате с вида на рамката по-долу съм ви показала и таблицата със стилове.


    Стилове

    За нагледност на посочените по-горе примери използвайте инструмента HTML редактор.
    Препоръчвам да прочетете още по темата.
    За днес това е всичко. Доскоро и успех .

    идеята взех от shpargalochki.ru


    Няма коментари :

    Публикуване на коментар

    Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved