انیمیشن pure css برای بوردر

[sir1 512]

با سلام

این امکان وجود داره که pure css زیر را برای باکس دانلود در سایت وردپرس انجام داد؟

https://codepen.io/Rplus/pen/lEDBj

کد و اسکرین باکس مورد نظر در سایتم:

کد:

{
		$html .='<div class="mrbox">';
		$html .='برای دیدن لینک دانلود در سایت ثبت نام و اکانت خود را ویژه کنید <br>';
		$html .='<a class="lrm-switch-to--register" href="#0" style="-webkit-box-shadow: inset 0px 1px 0px 0px #2c88f8; background: linear-gradient(to bottom, #e40044 5%, #fe487e 100%); border-radius: 6px; display: inline-block; color: #ffffff; font-size: 14px; font-weight: bold; padding: 6px 24px;">ورود یا ثبـــت نــــام + اکــانت Vip</a>';
		$html .='</div>';
	}

اسکرین و لینک بخش مورد نظر در سایتم: https://en.acgih.ir/?p=31037

 

ویرایش شده آبان 99 توسط sir1

[sir1 512]

با سلام مجدد. این کارو انجام دادم 

https://codepen.io/acgih/pen/bGeYJVR

ولی فقط وقتی width و height را که 200px هستند تغییر میدم افکت کار نمیکنه. میشه راهنمایی کنید که چطور بدون width و height افکت کار کنه و در مبایل و دسکتاپ عرض و ارتفاع اتوماتیک تنظیم بشه و ریسپانسیو باشه؟

[sir1 512]

دمو اصلی به صورت زیر است:

https://codepen.io/Rplus/pen/lEDBj

اخرین باره  که این پست بالا میاد. اگر کسی css  میدونه لطفا راهنمایی کنه

[asadiy4n 2807]

سلام همون داخل خودش که میتونستید تبدیل به css کنید

<div class="bb"></div>

css

.bb, .bb::before, .bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.bb::before, .bb::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}
.bb:hover::after, .bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}
html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

 

[sir1 512]

در 3 دقیقه قبل، asadiy4n گفته است :

سلام همون داخل خودش که میتونستید تبدیل به css کنید

<div class="bb"></div>

css

.bb, .bb::before, .bb::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.bb::before, .bb::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}
.bb:hover::after, .bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}
html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

 

این کد css اصلی است میخام ویرایش بشه و در حالت width:100% کار کنه.

[sir1 512]

بالاخره درست کردم. فقط یک مورد مونده که اونم فاصله افکت از باکس دانلود است. با قرار دادین margin:-20px به استایل زیر فاصله از جعبه دانلود ایجاد میشه ولی افکت مخفی میشه:

.bb span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,#4a88f8,#4a88f8);
    animation: animate1 3s linear infinite;
    margin: -20px;
}

 نمونه کار خودم: 

https://codepen.io/acgih/pen/yLJKxzX

دمو که دارای فاصله هست:

https://codepen.io/wendave/pen/rJZRQZ