Dynamic, Animating and Stretching Border

Written by @kerixa 27 August 2020

Although borders and frames makes the contents more beautiful, simple borders are boring. Below you can find slightly stretching border. When it is hovered the stretching rate speeds up. It is beautiful!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html, body{
	width: 100%; height: 100%;
	background-color: #DDFFF7;
	z-index: 1;
	position: relative;
	overflow: hidden;
	
}

body{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items:center;
	color:#fff;
}
.box{
	width: 300px; height: 200px;
	background-color: #DDFFF7;
	position: relative;
	box-shadow: 10px 10px 42px 0 rgba(0,0,0,0.75);
}
.box:after, .box:before{
	mix-blend-mode:multiply;
	filter:none;
	z-index: -1;
	content:'';
	width:calc(100% + (50px * 2));
	height:calc(100% + (50px * 2));
	position: absolute;
	display: block;
	animation: border 10s ease-in-out infinite;
	transform:translateX(-50px) translateY(-50px);
}
@keyframes border {
  0%, 100% {
    -webkit-clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
            clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
  }
  50% {
    -webkit-clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
            clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
  }
}

.box:after{
	animation-delay: -5s;
	background-color: #93e1d8;
	clip-path: polygon(0 0, calc(100% - (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 100%, calc(0% + (33.3333333333px)) calc(100% - (33.3333333333px)));
}
.box:before {
	background-color: #AA4465;
	  clip-path: polygon(calc(0% + (33.3333333333px)) calc(0% + (33.3333333333px)), 100% 0, calc(100% - (33.3333333333px)) calc(100% - (33.3333333333px)), 0 100%);
}

.box:hover:after{
	animation-delay: -0.1s;
}
.box:hover:before, .box:hover:after {

          animation-duration: 0.2s;
}
</style>
<div class="box"></div><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300