افکت حاشیه متحرک با css3

آموزش, اسکریپت, ترفند های CSS, دسته بندی نشده
94-01-09

به نام خدا

 

در بعضی از سایت ها آیتم هایی وجود دارند که وقتی شما نشانگر را بر روی یکی از آن ها قرار می دهید یک رویداد متحرک زیبا را نمایش داده خواهد شد. در این مطلب شما با ایجاد اشکال با حاشیه (border) متحرک، توسط css3 آشنا خواهید شد.

نمایش دمو

demo

در ابتدا شما را با ساده ترین حالت ایجاد این آیتم ها آشنا می کنیم.

برای شروع کدهای زیر را داخل تگ body بنویسید:

 

<div>
    <svg width="200" height="200">
        <line x1="0" y1="0" x2="600" y2="0" />
    </svg>
</div>

بهتر است با تگ svg کمی آشنا شوید:

این تگ (SVG) مخفف گرافیک برداری مقیاس پذیر می باشد که برای تعریف گرافیک برداری مبتنی بر وب مورد استفاده قرار می گیرد. این تگ از موارد پیشنهاد شده توسط W3C می باشد. برای اطلاعات بیشتر درمورد این تگ می توانید به سایت www.w3schools.com مراجعه نمایید.

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

 

سپس کدهای زیر را در تگ head و داخل تگ style  وارد می کنیم.

div {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #ddd;
}
 
svg {
    position: absolute;
    top: 0;
    left: 0;
}
 
svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}
 
div:hover svg line {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}

کد صفحه ما به شکل زیر می شود:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Border animation effect with css3(TarahSite.net)</title>


<style>

div {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #ddd;
}
 
svg {
    position: absolute;
    top: 0;
    left: 0;
}
 
svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}
 
div:hover svg line {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
</style>
<!-- TarahSite.net -->
</head>
<div>
    <svg width="200" height="200">
        <line x1="0" y1="0" x2="600" y2="0" />
    </svg>
</div>
<body>
</body>
</html>

دموی حالت ساده

 

کد بالا یک حالت بسیار ساده از این افکت بود. در ادامه آن را کمی توسعه می دهیم.

 

یک فایل جدید از نوع html ایجاد کنید و کدهای زیر را در آن کپی کنید:

<!-- طراح سایت - کد ها و پلاگین های رایگان برای طراحی سایت -->
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
    <!--**************** TarahSite.Net ****************-->
		
        <meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Border Animation Effect with SVG</title>
		<meta name="description" content="Border Animation Effect: Recreating the effect seen on TarahSite.Net with SVG" />
		<meta name="keywords" content="svg, border effect, animated border, line, grid item, hover, css" />
		<meta name="author" content="Codrops" />
        
          <!--**************** TarahSite.Net ****************-->
		
        
        <link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
        
        
          <!--**************** TarahSite.Net ****************-->
		
	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<header class="codrops-header">
		    <h1>افکت حاشیه متحرک </h1>
            <h1><a href="www.tarahsite.net" title="tarah site - border animation effect" >........ . . TARAHSITE.NET . . ........ </a></h1>
            <h3>border animation effect</h3>
				<p>تست شده در مرورگرهای کروم و فایرفاکس</p>
			</header>
			<section class="demo-1">
				<div class="grid">
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
					<h3>آ</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ب</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>پ</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
				</div><!-- /grid -->
			</section>
			<section class="demo-2">
				<h2>انیمیشن رنگی</h2>
				<div class="grid">
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ت</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>س</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ش</h3>
						<<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
				</div><!-- /grid -->
			</section>
			<section class="demo-3">
				<h2>فریم(frame)</h2>
				<div class="grid">
					<div class="box">
						<svg width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ص</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ض</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ط</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
				</div><!-- /grid -->
			</section>
			<section class="demo-4">
				<h2>حاشیه چرخشی</h2>
				<div class="grid">
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ظ</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ع</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
					<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
						<h3>ف</h3>
						<span>1394</span>
						<span>TarahSite.Net</span>
					</div>
				</div><!-- /grid -->
			</section>
			
		</div><!-- /container -->
        اسکریپت ها و استایل های بیشتر در 
: <a href="http://www.tarahsite.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.tarahsite.net </a>

	</body>
</html>

 

در کدهای بالا برای ایجاد یک آیتم جدید کافیست کد مربوط به یک آیتم که بصورت زیر است را وارد نمایید:

<div class="box">
						<svg  width="100%" height="100%">
							<line class="top" x1="0" y1="0" x2="900" y2="0"/>
							<line class="left" x1="0" y1="460" x2="0" y2="-920"/>
							<line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
							<line class="right" x1="300" y1="0" x2="300" y2="1380"/>
						</svg>
					<h3>عنوان آیتم </h3>
						<span>متن ۱</span>
						<span>متن ۲</span>
					</div>

 

با ویرایش و تغییر فایل component.css می توانید شکل دلخواه خود را به آیتم ها بدهید.

فایل های استایل و فونت مربوط به این مطلب را می توانید از اینجا دانلود نمایید.

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها : ، ، ،
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

افزايش رتبه سايت در گوگل

جستجو
تماس با تیم طراح سایت

آیدی تلگرام : ferasat66@

کانال ما : tarahsitenet@

شماره تماس : ۰۹۳۷۲۰۸۸۷۷۱

آدرس : اصفهان امام خمینی شهرک کوثر

عضویت آموزش ربات تلگرام
[mc4wp_form id="5024"]

logo-samandehi