استایل Border انیمیشنی زیبا - CSS Border transitions ( نمونه 6)

ساخت وبلاگ

html {

  background: #fefefe;

}

body {

  color: #4b507a;

  font: 300 24px/1.5 Lato, sans-serif;

  margin: 1em auto;

  max-width: 36em;

  padding: 1em 1em 2em;

  text-align: center;

  isolation: isolate;

}

button {

  background: none;

  border: 0;

  box-sizing: border-box;

  box-shadow: inset 0 0 0 2px #f45e61;

  color: #f45e61;

  font-size: inherit;

  font-weight: 700;

  margin: 1em;

  padding: 1em 2em;

  text-align: center;

  text-transform: capitalize;

  position: relative;

  vertical-align: middle;

}

button::before, button::after {

  box-sizing: border-box;

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

}

/* Spin & Thick */

.spin {

  width: 5em;

  height: 5em;

  padding: 0;

}

.spin:hover {

  color: #0eb7da;

}

.spin::before, .spin::after {

  top: 0;

  left: 0;

}

.spin::before {

  border: 2px solid transparent;

}

.spin:hover::before {

  border-top-color: #0eb7da;

  border-right-color: #0eb7da;

  border-bottom-color: #0eb7da;

  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;

  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;

}

.spin::after {

  border: 0 solid transparent;

}

.spin:hover::after {

  border-top: 2px solid #0eb7da;

  border-left-width: 2px;

  border-right-width: 2px;

  -webkit-transform: rotate(270deg);

          transform: rotate(270deg);

  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;

  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;

  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;

  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;

}

.thick {

  color: #f45e61;

}

.thick:hover {

  color: #fff;

  font-weight: 700;

}

.thick::before {

  border: 2.5em solid transparent;

  z-index: -1;

}

.thick::after {

  mix-blend-mode: color-dodge;

  z-index: -1;

}

.thick:hover::before {

  background: #f45e61;

  border-top-color: #f45e61;

  border-right-color: #f45e61;

  border-bottom-color: #f45e61;

  -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;

  transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;

}

.thick:hover::after {

  border-top: 2.5em solid #f45e61;

  border-left-width: 2.5em;

  border-right-width: 2.5em;

}

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 363 تاريخ : پنجشنبه 8 مهر 1395 ساعت: 10:11

خبرنامه