It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 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!
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!