{
"homeurl": "https://supportwebs.ir/blog/",
"resultstype": "vertical",
"resultsposition": "hover",
"itemscount": 4,
"imagewidth": 70,
"imageheight": 70,
"resultitemheight": "auto",
"showauthor": 0,
"showdate": 0,
"showdescription": 1,
"charcount": 2,
"noresultstext": "عبارت جستجو شده پیدا نشد",
"didyoumeantext": "منظور شما این هست : ",
"defaultImage": "https://supportwebs.ir/blog/wp-content/plugins/ajax-search-pro/img/default.jpg",
"highlight": 0,
"highlightwholewords": 1,
"openToBlank": 1,
"scrollToResults": 0,
"resultareaclickable": 1,
"autocomplete": {
"enabled": 1,
"googleOnly": 1,
"lang": "en",
"mobile": 1 },
"triggerontype": 1,
"triggeronclick": 1,
"triggeronreturn": 1,
"triggerOnFacetChange": 1,
"trigger": {
"delay": 300,
"autocomplete_delay": 310 },
"overridewpdefault": 0,
"override_method": "post",
"redirectonclick": 1,
"redirectClickTo": "results_page",
"redirect_on_enter": 1,
"redirectEnterTo": "results_page",
"redirect_url": "?s={phrase}",
"settingsimagepos": "right",
"settingsVisible": 0,
"hresulthidedesc": "0",
"prescontainerheight": "400px",
"pshowsubtitle": "0",
"pshowdesc": "1",
"closeOnDocClick": 1,
"iifNoImage": "description",
"iiRows": 2,
"iiGutter": 5,
"iitemsWidth": 200,
"iitemsHeight": 200,
"iishowOverlay": 1,
"iiblurOverlay": 1,
"iihideContent": 1,
"loaderLocation": "auto",
"analytics": 0,
"analyticsString": "",
"show_more": {
"url": "?s={phrase}",
"action": "ajax"
},
"mobile": {
"trigger_on_type": 1,
"trigger_on_click": 1,
"hide_keyboard": 0 },
"compact": {
"enabled": 0,
"width": "100%",
"closeOnMagnifier": 1,
"closeOnDocument": 0,
"position": "static",
"overlay": 0 },
"animations": {
"pc": {
"settings": {
"anim" : "fadedrop",
"dur" : 300 },
"results" : {
"anim" : "fadedrop",
"dur" : 300 },
"items" : "fadeInDown"
},
"mob": {
"settings": {
"anim" : "fadedrop",
"dur" : 300 },
"results" : {
"anim" : "fadedrop",
"dur" : 300 },
"items" : "voidanim"
}
},
"autop": {
"state": "disabled",
"phrase": "",
"count": 10 }
}
28 نمونه کد CSS Border Animations جذاب و خلاقانه
در این مقاله سایت پشتیبان وب قصد داریم به معرفی 28 نمونه کد CSS Border Animations جذاب و خلاقانه بپردازیم. لینک دانلود کد html و css این نمونه نیز قرار داده شده تا بتوانید از آن ها در طراحی سایت خود استفاده کنید. با به کارگیری این کدها در سایت خود می توانید سایتی زیباتر با ارائه رابط کاربری موثرتر طراحی کنید.
با css طراحی کنید
درباره کد:
FRAMED
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: خیر
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
DASHED BORDER ICON ANIMATIONS
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: خیر
تعلقات: font-awesome.css
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
GRADIENT BORDER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
FANCY BORDER RADIUS
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
CSS BORDER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
ROTATING BORDER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
با css جدول سایت طراحی کنید
درباره کد:
GOLD BORDER SHIMMER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: خیر
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
ANIMATING BORDER-RADIUS
mix-blend-mode: برای درخشندگی و متحرک سازی و border-radius در css. با تغییر اندازه container می توانید رنگ المان ها و متن های داخل بلوک‌ها را تغییر دهید.
مرورگر های سازگار: Chrome, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML (Pug) / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION
clip-path: متحرک سازی
مرورگر های سازگار: Chrome, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION
clip-path: متحرک سازی
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION CSS
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: bootstrap.css
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
![Share Buttons Animation](https://supportwebs.ir/blog/wp-content/uploads/2020/11/stripe-border-effects-html-css_gif.gif")
درباره کد:
STRIPE BORDER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: خیر
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
CSS ONLY BORDER ANIMATION
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: بله
تعلقات: –
ساخته شده با: HTML (Pug) / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
طراحی آیکون با css
درباره کد:
BUTTON BORDER SLIDE MIXIN
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
DRAW BORDERS FROM CENTER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION
یک CSS border animation جذاب و خلاقانه
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION
یک CSS border animation جذاب و خلاقانه
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
SVG-Ellipse-Border-Animation
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
CSS BORDER HOVER TRANSITIONS
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
Animated border tracing
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
DOUBLE BORDER ANIMATION
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
border animation without svg
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML (Pug) / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
border gradient mixin
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER ANIMATION EFFECT
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS / JavaScript
لینک دانلود: کد و پیش نمایش
درباره کد:
SVG BORDER ANIMATION
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS
لینک دانلود: کد و پیش نمایش
درباره کد:
ANIMATED BORDER GRADIENT EFFECT
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
BORDER-RADIUS ANIMATION
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (SCSS)
لینک دانلود: کد و پیش نمایش
درباره کد:
SIMON GOELLNER
مرورگر های سازگار: Chrome, Edge, Firefox, Opera, Safari
ریسپانسیو: –
تعلقات: –
ساخته شده با: HTML / CSS (Less)
لینک دانلود: کد و پیش نمایش
Loading...