رفتن به مطلب

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


پست های پیشنهاد شده

با سلام

این امکان وجود داره که 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

1.thumb.png.5855904dabeca7306699b462c79217fb.png

 

ویرایش شده توسط sir1
لینک به ارسال

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

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

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

لینک به ارسال

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

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

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

لینک به ارسال

سلام همون داخل خودش که میتونستید تبدیل به 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;
}

 

لینک به ارسال
در 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% کار کنه.

لینک به ارسال

بالاخره درست کردم. فقط یک مورد مونده که اونم فاصله افکت از باکس دانلود است. با قرار دادین 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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...