CSS Effect

CSS Effects
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
Hover Text
<!DOCTYPE html>
<html lang=”ko”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>CSS Effects</title>
<link rel=”stylesheet” href=”animation.css”>
</head>
<body>
<div class=”animation-wrap”>
<div class=”animation-border”><span class=”border-center”>Hover Text</span></div>
<div class=”animation-border”><span class=”border-left-right”>Hover Text</span></div>
<div class=”animation-border”><span class=”border-right-left”>Hover Text</span></div>
<div class=”animation-border”><span class=”border-fade”>Hover Text</span></div>
<div class=”animation-border”><span class=”border-marker”>Hover Text</span></div>
<div class=”animation-border”><span class=”border-linethrough”>Hover Text</span></div>
<div class=”animation-border”><span class=”double-dashed”>Hover Text</span></div>
<div class=”animation-border”><span class=”slide-up”>Hover Text</span></div>
<div class=”animation-border”><span class=”slide-down”>Hover Text</span></div>
<div class=”animation-effect”><div><span class=”zoom”>Hover Text</span></div></div>
<div class=”animation-effect”><div><span class=”swing-horizontal”>Hover Text</span></div></div>
<div class=”animation-effect”><div><span class=”swing-vertical”>Hover Text</span></div></div>
</div>
</body>
</html>
html { font-size: 15px; }
body { font-size: 1rem; }
$primary: #440099;
$white: #fff;
.animation {
&-wrap {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-wrap: wrap;
width:90%;
margin: 0 auto;
padding: 20px;
background: #f8f8f8;
}
&-border {
position: relative;
width:100%;
height: 100px;
margin:20px;
background: $white;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
&:hover {
box-shadow: 0 14px 25px rgba(0,0,0,.16);
}
span {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
font-weight: 600;
cursor:pointer;
&:after {
content:”;
display: block;
width: 100%;
position: absolute;
background-color: $primary;
}
}
.border-left-right,
.border-right-left,
.border-center {
&:hover {
&:after {
transform: scaleX(1);
}
}
&:after {
left: 0;
bottom: -4px;
height: 2px;
transform: scaleX(0);
transition: transform .4s cubic-bezier(.86,0,.07,1);
}
}
.border-left-right {
&:after { transform-origin: bottom right; }
&:hover:after { transform-origin: bottom left; }
}
.border-right-left {
&:after { transform-origin: bottom left; }
&:hover:after { transform-origin: bottom right; }
}
.border-fade {
&:after {
left: 0;
bottom: -4px;
height: 2px;
transition: all .2s ease;
}
&:hover:after {
opacity: 0;
transform: translateY(10px);
}
}
.border-marker {
&:after {
left: -1px;
right: -1px;
top: 70%;
bottom: -4px;
background: rgba(68, 0, 153, 0.3);
z-index:-1;
transition: top .1s ease-in-out;
}
&:hover:after {
top: -3px;
}
}
.border-linethrough {
&:after {
width: 0;
height: 2px;
top: 50%;
left: 0;
background: rgba(255,34,0,0.7);
margin-top: 1px;
transition: width .8s cubic-bezier(.22,.61,.36,1);
}
&:hover:after {
background: rgba(255,34,0,0.7);
right:0;
width: 100%;
}
}
.double-dashed:before,
.double-dashed:after {
left: 0;
height: 2px;
width: 0;
transition: transform 0.2s ease-in-out;
}
.double-dashed:before {
content: ”;
top: -9px;
position: absolute;
background-color: $primary;
transform: translateX(-100%);
}
.double-dashed:after {
bottom: -10px;
transform: translateX(100%);
}
.double-dashed:hover:before,
.double-dashed:hover:after {
transform: translateX(0);
width: 100%;
}
.slide-down,
.slide-up {
color: $primary;;
padding: 8px 14px;
overflow: hidden;
&:hover {
color: $white;
transition: 0.2s ease-out;
&:after {
transform: translateY(0);
transition: transform 0.2s ease-in;
}
}
&:after {
top:0;
left: 0;
height: 100%;
background-color:$primary;
z-index: -1;
}
}
.slide-down {
&:after {
transform: translateY(-100%);
}
}
.slide-up {
&:after {
width: 100%;
transform: translateY(100%);
}
}
}
&-effect {
position: relative;
width: 100%;
height: 100px;
margin:20px;
background: $white;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
&:hover {
box-shadow: 0 14px 25px rgba(0,0,0,.16);
}
div {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
span {
display: flex;
font-weight: 600;
cursor:pointer;
&.zoom { transition: transform .3s; }
&.zoom:hover { transform: scale(1.2); }
&.swing-horizontal:hover { animation: swingHorizontal 1s ease; }
&.swing-vertical:hover { animation: swingVertical 1s ease; }
}
}
}
}
@keyframes swingHorizontal {
15% {transform:translateX(5px)}
30% {transform:translateX(-5px);}
50% {transform:translateX(6px);}
65% {transform:translateX(-6px);}
80% {transform:translateX(2px);}
100%{transform:translateX(0);}
}
@keyframes swingVertical {
15%{transform:translateY(6px);}
30%{transform:translateY(-6px);}
50%{transform:translateY(4px);}
65%{transform:translateY(-2px);}
80%{transform:translateY(2px);}
100%{transform:translateY(0);}
}
@media (min-width: 481px) and (max-width: 1024px) {
.animation-border,
.animation-effect {
width: calc(33.333% – 40px);
}
}
@media (min-width: 1025px) {
.animation-border,
.animation-effect {
width: calc(25% – 40px);
min-width: 200px;
}
}
html {
font-size: 15px;
}
body {
font-size: 1rem;
}
.animation-wrap {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
padding: 20px;
background: #f8f8f8;
}
.animation-border {
position: relative;
width: 100%;
height: 100px;
margin: 20px;
background: #fff;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
}
.animation-border:hover {
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.animation-border span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
cursor: pointer;
}
.animation-border span:after {
content: ”;
display: block;
width: 100%;
position: absolute;
background-color: #440099;
}
.animation-border .border-left-right:hover:after,
.animation-border .border-right-left:hover:after,
.animation-border .border-center:hover:after {
transform: scaleX(1);
}
.animation-border .border-left-right:after,
.animation-border .border-right-left:after,
.animation-border .border-center:after {
left: 0;
bottom: -4px;
height: 2px;
transform: scaleX(0);
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.animation-border .border-left-right:after {
transform-origin: bottom right;
}
.animation-border .border-left-right:hover:after {
transform-origin: bottom left;
}
.animation-border .border-right-left:after {
transform-origin: bottom left;
}
.animation-border .border-right-left:hover:after {
transform-origin: bottom right;
}
.animation-border .border-fade:after {
left: 0;
bottom: -4px;
height: 2px;
transition: all .2s ease;
}
.animation-border .border-fade:hover:after {
opacity: 0;
transform: translateY(10px);
}
.animation-border .border-marker:after {
left: -1px;
right: -1px;
top: 70%;
bottom: -4px;
background: rgba(68, 0, 153, 0.3);
z-index: -1;
transition: top .1s ease-in-out;
}
.animation-border .border-marker:hover:after {
top: -3px;
}
.animation-border .border-linethrough:after {
width: 0;
height: 2px;
top: 50%;
left: 0;
background: rgba(255, 34, 0, 0.7);
margin-top: 1px;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animation-border .border-linethrough:hover:after {
background: rgba(255, 34, 0, 0.7);
right: 0;
width: 100%;
}
.animation-border .double-dashed:before,
.animation-border .double-dashed:after {
left: 0;
height: 2px;
width: 0;
transition: transform 0.2s ease-in-out;
}
.animation-border .double-dashed:before {
content: ”;
top: -9px;
position: absolute;
background-color: #440099;
transform: translateX(-100%);
}
.animation-border .double-dashed:after {
bottom: -10px;
transform: translateX(100%);
}
.animation-border .double-dashed:hover:before,
.animation-border .double-dashed:hover:after {
transform: translateX(0);
width: 100%;
}
.animation-border .slide-down,
.animation-border .slide-up {
color: #440099;
padding: 8px 14px;
overflow: hidden;
}
.animation-border .slide-down:hover,
.animation-border .slide-up:hover {
color: #fff;
transition: 0.2s ease-out;
}
.animation-border .slide-down:hover:after,
.animation-border .slide-up:hover:after {
transform: translateY(0);
transition: transform 0.2s ease-in;
}
.animation-border .slide-down:after,
.animation-border .slide-up:after {
top: 0;
left: 0;
height: 100%;
background-color: #440099;
z-index: -1;
}
.animation-border .slide-down:after {
transform: translateY(-100%);
}
.animation-border .slide-up:after {
width: 100%;
transform: translateY(100%);
}
.animation-effect {
position: relative;
width: 100%;
height: 100px;
margin: 20px;
background: #fff;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
}
.animation-effect:hover {
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}
.animation-effect div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.animation-effect div span {
display: flex;
font-weight: 600;
cursor: pointer;
}
.animation-effect div span.zoom {
transition: transform .3s;
}
.animation-effect div span.zoom:hover {
transform: scale(1.2);
}
.animation-effect div span.swing-horizontal:hover {
animation: swingHorizontal 1s ease;
}
.animation-effect div span.swing-vertical:hover {
animation: swingVertical 1s ease;
}
@keyframes swingHorizontal {
15% {
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(6px);
}
65% {
transform: translateX(-6px);
}
80% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
}
@keyframes swingVertical {
15% {
transform: translateY(6px);
}
30% {
transform: translateY(-6px);
}
50% {
transform: translateY(4px);
}
65% {
transform: translateY(-2px);
}
80% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
@media (min-width: 481px) and (max-width: 1024px) {
.animation-border,
.animation-effect {
width: calc(33.333% – 40px);
}
}
@media (min-width: 1025px) {
.animation-border,
.animation-effect {
width: calc(25% – 40px);
min-width: 200px;
}
}