Предлагаю вашему вниманию 9 видов бесплатных примеров HTML анимации границ блока контента на CSS.
И так, поехали:
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;
}
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;
}
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%;
}
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%;
}
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;
}
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 */
}
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);
}
}
}
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;
}
Другие статьи по теме:
<animateMotion> предоставляет способ определить, как элемент перемещается по траектории движения. В этой статье Пол Скэнлон делится идеей о том, как использовать это, анимируя гоночные автомобили в бесконечном цикле так же просто, как раз-два-три!
В этой статье мы покажем, как легко добавить эффекты градиента и узоры к тексту на веб-странице.
Обычное поле Поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента...
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.
