CSS анимация обводки блоков

CSS анимация обводки блоков

Предлагаю вашему вниманию 9 видов бесплатных примеров HTML анимации границ блока контента на CSS.

И так, поехали:

1. Анимированная трассировка границ

Это та область, за пределами которой вам следует мыслить

HTML

<div class="box">
<div class="content">
<h1>Это та область, за пределами которой вам следует мыслить</h1>
</div>
</div>

CSS

.box
{
width: 300px;
margin: 0 auto;
padding: 2px;
background-color: #eaab00; /* gold */
/* Single pixel data uri image http://jsfiddle.net/LPxrT/
/* background-image: gold, gold, white */
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='), url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),
url('data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
background-repeat: no-repeat;
background-size: 0 2px, 0 100%, 0% 2px;
background-position: top center, top center, bottom center;
-webkit-animation: drawBorderFromCenter 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes drawBorderFromCenter {
0% {
background-size: 0 2px, 0 0, 100% 100%;
}
20% {
background-size: 100% 2px, 100% 0, 100% 100%;
}
66%
{
background-size: 100% 2px, 100% 98%, 100% 100%;
}
99%
{
background-size: 100% 2px, 100% 98%, 0 2px;
}
}
.content
{
background: white;
padding: 2em;
text-align: center;
text-transform: uppercase;
}

2. Анимация двойной границы

Рамка с анимацией

HTML

<div class="svg-wrapper">
<svg height="60" width="500" xmlns="http://www.w3.org/2000/svg">
<rect class="shape1" height="60" width="500" />
<rect class="shape2" height="60" width="500" />
<div class="text">Double Border Animation</div>
</svg>
</div>

CSS

html, body {
background: rgb(20,20,20);
text-align: center;
height: 100%;
overflow: hidden;
margin: 0;
}
::selection {
background: #19f6e8;
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 500px;
}
.shape1,
.shape2 {
stroke-dasharray: 1120;
stroke-width: 5px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition-timing-function: linear;
transition: stroke-dashoffset 4s, stroke-dasharray 4s;
}
.shape1 {
stroke-dashoffset: 1120;
}
.shape2 {
stroke-dashoffset: -1120;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape1,
.svg-wrapper:hover .shape2 {
stroke-dashoffset: 0;
stroke-dasharray: 1120;
}

3. Нарисуйте границы от центра!

ВАННАЯ КОМНАТА

HTML

<div class="centerBox">

<div class="categoryWrapper">
<h1>Bathrooms</h1>
<button>
<span>
<span>
<span data-attr-span="Смотреть ассортимент">
Смотреть ассортимент
</span>
</span>
</span>
</button>
</div>

</div>

CSS

body{
height: 1vh;
margin: 0;
padding: 0;
background: #3b3646;
}
*{
box-sizing: border-box;
}
.centerBox{
display: flex;
justify-content: center;
align-items: center;
height: 600px
}
.categoryWrapper{
height: 310px;
width: 460px;
background: url("http://ohlookawebsite.com/bathroomtestfull.jpg") no-repeat center center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.categoryWrapper:after{
position: absolute;
top:0;
left: 0;
right:0;
bottom: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a29ca9+0,95909b+99 */
background: #a29ca9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a29ca9 0%, #95909b 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a29ca9 0%,#95909b 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a29ca9 0%,#95909b 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29ca9', endColorstr='#95909b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
content: '';
opacity: 0;
-webkit-transition: opacity 0.9s ease 0s;
} .categoryWrapper:hover:after{
opacity: 0.4;
}
.categoryWrapper h1{
color:white;
font-size: 50px;
letter-spacing: 2px;
-webkit-transition: all 0.15s ease 0s;
position: relative;
z-index: 10;
}
.categoryWrapper:hover h1{
transform: translateY(-10px);
}
.categoryWrapper button{
position: absolute;
transform: translatey(60px);
-webkit-appearance: none;
border: none;
background: none;
color:white;
width: 250px;
height:50px;
font-size: 20px;
padding: 0;
margin: 0;
outline: none;
z-index: 10;
}
.categoryWrapper button span{
display: block;
position: relative;
line-height: 50px;
height: 50px;
cursor: pointer;
}
.categoryWrapper button > span:after{
content:'';
position: absolute;
top:0;
left: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-left: none;
border-bottom: none;

transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}
.categoryWrapper:hover button > span:after{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.categoryWrapper button > span:before{
content:'';
position: absolute;
top:0;
right: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-right: none;
border-bottom: none;

transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}
.categoryWrapper:hover button > span:before{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.categoryWrapper button > span > span:before{
content:'';
position: absolute;
bottom:0;
right: 0%;
width: 1px;
height: 1px;
opacity: 0;

}
.categoryWrapper:hover button > span > span:before{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}
.categoryWrapper button > span > span:after{
content:'';
position: absolute;
bottom:0;
left: 0%;
width: 1px;
height: 1px;
opacity: 0;

}
.categoryWrapper:hover button > span > span:after{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}
.categoryWrapper button > span > span > span{
transition: color 0.15s ease-out 0.3s;
color: transparent;
}
.categoryWrapper:hover button > span > span > span{
color:white;
}
.categoryWrapper button > span > span > span:after{
position: absolute;
top:0;left:0;right:0;bottom:0;
color:#1f2e4d;
content: attr(data-attr-span);
width: 0%;
height: 100%;
background:white;
white-space: nowrap;
text-align: center;
margin: auto;
overflow: hidden;
display: flex;
justify-content: center;
transition: width 0.2s;
}
.categoryWrapper button:hover > span > span > span:after{
width: 100%;
}

4. Погранично-градиентная смесь

HTML

<div class="container">
<h1> <span>border-gradient</span> demo</h1>
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>

<div class="circle-multiple">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div> </div>

CSS

body{
height: 1vh;
margin: 0;
padding: 0;
background: #3b3646;
}
*{
box-sizing: border-box;
}
.centerBox{
display: flex;
justify-content: center;
align-items: center;
height: 600px
}
.categoryWrapper{
height: 310px;
width: 460px;
background: url("http://ohlookawebsite.com/bathroomtestfull.jpg") no-repeat center center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.categoryWrapper:after{
position: absolute;
top:0;
left: 0;
right:0;
bottom: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a29ca9+0,95909b+99 */
background: #a29ca9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a29ca9 0%, #95909b 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a29ca9 0%,#95909b 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a29ca9 0%,#95909b 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29ca9', endColorstr='#95909b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
content: '';
opacity: 0;
-webkit-transition: opacity 0.9s ease 0s;
}
.categoryWrapper:hover:after{
opacity: 0.4;
}
.categoryWrapper h1{
color:white;
font-size: 50px;
letter-spacing: 2px;
-webkit-transition: all 0.15s ease 0s;
position: relative;
z-index: 10;
}
.categoryWrapper:hover h1{
transform: translateY(-10px);
}
.categoryWrapper button{
position: absolute;
transform: translatey(60px);
-webkit-appearance: none;
border: none;
background: none;
color:white;
width: 250px;
height:50px;
font-size: 20px;
padding: 0;
margin: 0;
outline: none;
z-index: 10;
}
.categoryWrapper button span{
display: block;
position: relative;
line-height: 50px;
height: 50px;
cursor: pointer;
}
.categoryWrapper button > span:after{
content:'';
position: absolute;
top:0;
left: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-left: none;
border-bottom: none;

transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}
.categoryWrapper:hover button > span:after{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.categoryWrapper button > span:before{
content:'';
position: absolute;
top:0;
right: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-right: none;
border-bottom: none;

transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}
.categoryWrapper:hover button > span:before{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.categoryWrapper button > span > span:before{
content:'';
position: absolute;
bottom:0;
right: 0%;
width: 1px;
height: 1px;
opacity: 0;

}
.categoryWrapper:hover button > span > span:before{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}
.categoryWrapper button > span > span:after{
content:'';
position: absolute;
bottom:0;
left: 0%;
width: 1px;
height: 1px;
opacity: 0;

}
.categoryWrapper:hover button > span > span:after{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}
.categoryWrapper button > span > span > span{
transition: color 0.15s ease-out 0.3s;
color: transparent;
}
.categoryWrapper:hover button > span > span > span{
color:white;
}
.categoryWrapper button > span > span > span:after{
position: absolute;
top:0;left:0;right:0;bottom:0;
color:#1f2e4d;
content: attr(data-attr-span);
width: 0%;
height: 100%;
background:white;
white-space: nowrap;
text-align: center;
margin: auto;
overflow: hidden;
display: flex;
justify-content: center;
transition: width 0.2s;
}
.categoryWrapper button:hover > span > span > span:after{
width: 100%;
}

5. Эффект анимации границ с помощью SVG и CSS

D

2012 Broccoli, Asparagus, Curry

A

2013 Arugula, Chickweed

S

2014 Strawberry, Lemon

6. SVG границы с анимацией

Рамка с анимацией

HTML

<div class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
<div class="text">ZACH SAUCIER</div>
</svg>
</div>

CSS

html, body {
background: rgb(20,20,20);
text-align: center;
height: 100%;
overflow: hidden;
}
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
font-family: 'Roboto Condensed';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}

7. Анимированный Эффект Градиента Границы

HTML

<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>

CSS

@import "compass/css3";
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #111;

}
.seperator-wrapper {
width: 100%;
.seperator {
width: 3000px;
height: 5px;
animation: rotate 3s infinite linear;
-webkit-animation: rotate 3s infinite linear;
}

}
@-webkit-keyframes rotate {
from {
background-position: -3000px;
}
to {
background-position: 0px;
}
}
@keyframes rotate {
from {
background-position: -3000px;
}
to {
background-position: 0px;
}
}
.gradient {
background: rgb(48,255,144); /* Old browsers */
background: -moz-linear-gradient(left, rgba(48,255,144,1) 0%, rgba(237,45,237,1) 25%, rgba(201,152,38,1) 50%, rgba(48,255,230,1) 75%, rgba(48,255,144,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(48,255,144,1)), color-stop(25%,rgba(237,45,237,1)), color-stop(50%,rgba(201,152,38,1)), color-stop(75%,rgba(48,255,230,1)), color-stop(100%,rgba(48,255,144,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(48,255,144,1) 0%,rgba(237,45,237,1) 25%,rgba(201,152,38,1) 50%,rgba(48,255,230,1) 75%,rgba(48,255,144,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30ff90', endColorstr='#30ff90',GradientType=1 ); /* IE6-9 */
}

8. Анимация границы эллипса SVG

Наведи на меня

HTML

<section class="svg-container">
<h1>Hover me</h1>

<svg class="circle" xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse class="background" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="2"/>
<ellipse class="foreground" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="2"/>
<line class="line line1" x1="52" y1="62" x2="74" y2="62" />
<line class="line line2" x1="52" y1="62" x2="74" y2="62" />
</g>
</svg>
</section>

CSS

body {
align-items: center;
background: #222;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
.svg-container {
height: 124px;
position: relative;
width: 124px;

h1 {
color: #aaa;
font-family: "Source Sans Pro";
font-size: 1.2rem;
left: 50%;
letter-spacing: 4px;
position: absolute;
text-align: center;
top: -60px;
transform: translateX(-50%);
width: 100%;
}
}
.circle {
height: 124px;
width: 124px;

.background {
fill: transparent;
stroke: #1abc9c;
transition: all 200ms ease;
}

.foreground {
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 377;
stroke: #EE3769;
transform-origin: 50% 50%;
transform: rotate(-270deg);
transition: all 800ms ease;
}

.line {
stroke-width: 2;
stroke: #1abc9c;
transform-origin: 50% 50%;
transition: all 500ms ease;
}

.line2 {
transform: rotate(-90deg);
}

&:hover {
cursor: pointer;

.background {
stroke: transparent;
}

.foreground {
stroke-dashoffset: 0;
transform: rotate(-90deg);
}

.line {
stroke: #EE3769;
}

.line {
transform: rotate(180deg);
}

.line2 {
transform: rotate(0);
}
}
}

9. Анимация границ

HTML

<div class="box-outer">
<div class="main_box">
<div class="bar top"></div>
<div class="bar right delay"></div>
<div class="bar bottom delay"></div>
<div class="bar left"></div>
</div>
</div>

CSS

:root {
font-size: 10px;
--delay: .5s;
--timing: 1s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
body {
background: #000;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.box-outer {
overflow: hidden;
margin: 5rem auto;
width: 20rem;
height: 20rem;
}
.main_box {
width: 20rem;
height: 20rem;
position: relative;
background: #f34c4c;
border: 0.5rem solid #000;
}
.bar {
position: absolute;
width: 5rem;
height: 0.5rem;
background: #fff;
transition: all var(--timing) linear;
-webkit-animation-duration: var(--timing);
animation-duration: var(--timing);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bar.delay {
animation-delay: var(--delay);
-webkit-animation-delay: var(--delay);
}
.top {
top: -0.5rem;
left: -0.5rem;
}
.right {
top: 1.8rem;
right: -2.8rem;
transform: rotate(90deg);
}
.bottom {
bottom: -0.5rem;
left: -0.5rem;
}
.left {
top: 1.8rem;
left: -2.8rem;
transform: rotate(90deg);
}
@-webkit-keyframes h-move {
0% {
left: -0.5rem;
}
100% {
left: 20rem;
}
}
@keyframes h-move {
0% {
left: -0.5rem;
}
100% {
left: 20rem;
}
}
.top,
.bottom {
-webkit-animation-name: h-move;
animation-name: h-move;
}
@-webkit-keyframes v-move {
0% {
top: -0.5rem;
}
100% {
top: 22.8rem;
}
}
@keyframes v-move {
0% {
top: -0.5rem;
}
100% {
top: 22.8rem;
}
}
.right,
.left {
-webkit-animation-name: v-move;
animation-name: v-move;
}
CSS анимация обводки блоков

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Понимание HTML5 и CSS3 для веб-дизайна
Понимание HTML5 и CSS3 для веб-дизайна
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.

Анимационные указатели прокрутки страницы
Анимационные указатели прокрутки страницы
Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный...

Анимация для текста на CSS
Анимация для текста на CSS
В наше время без анимационных эффектов на сайте просто не обойтись. Это и слайдеры и скроллеры, различного рода реагирования элементов дизайна при наведении на них мышкой, это анимация при прокрутке страниц и различные выезжающие, выплывающие, выползающие и т.д. блоки контента. Дизайнеры используют свою фантазию на 100%, чтобы их дсайт выделился из общей массы и запомнился Пользователям...

Использование SVG с медиа-запросами
Использование SVG с медиа-запросами
В HTML-документах мы можем показывать, скрывать или переставлять части страницы в зависимости от условий области просмотра. Например, если окно браузера имеет ширину 480 пикселей, мы могли бы перенести нашу навигацию с горизонтальной на вертикальный, сворачиваемый список. Мы можем сделать нечто подобное при использовании SVG с медиа-запросами...

Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Это вопрос задают довольно часто: Можно ли создавать тени из градиентов вместо сплошных цветов? Нет конкретного свойства CSS, которое делает это, и любая информация, которую вы найдёте об этом, в основном представляет собой множество приемов CSS для аппроксимации градиента. Мы на самом деле рассмотрим некоторые из них по ходу дела.

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

QRcode

2010-2023 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.