PDA

View Full Version : افکت hover به صورت یک دایره توپر با لبه های رو به محو شدن



bftarane
یک شنبه 19 آبان 1392, 08:39 صبح
سلام.
لطفاً عکس زیر رو ببینید
112670
فرض کنید لینک ارتباط با ما رو به صورت معمولی داریم و می خواهیم با hover اون قسمت سفید رنگ دیده بشه.
ممنون می شم راهنمایی کنید.

من با Box Shadow سعی کردم این کار رو انجام بدم به صورت زیر ولی نتیجه شکل زیر هست که دلخواهم نیست.
112671


<head runat="server">
<style type="text/css">
body
{
background:navy;

}
a
{
width:100px;height:100px;border-radius:50px; display:block; background:#fff; border:solid 1px #fff;
line-height:90px;
text-align:center;
text-decoration:none;

}
a:hover
{
box-shadow:0 0 50px 20px #fff;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#">صفحه اصلی</a>
</div>
</form>
</body>
</html>

ممنون.

2undercover
یک شنبه 19 آبان 1392, 13:42 عصر
بفرمایید:

http://jsfiddle.net/D9KUM/ (http://jsfiddle.net/D9KUM/)

bftarane
یک شنبه 19 آبان 1392, 15:27 عصر
ممنون.
در FF و Chrome درسته ولی در IE به شکل مربع دیده میشه راهی مثل استفاده از htc براش وجود داره که در IE هم دایره ای نشون بده؟

2undercover
یک شنبه 19 آبان 1392, 15:36 عصر
بله اون گرد بودن توی IE رو می تونید با border-radius درست کنید!

f_talebi
یک شنبه 19 آبان 1392, 15:46 عصر
میگم این اولیه قشنگ تر نیست؟ :لبخند: شبیه ماه توی آسمونه جالبه

bftarane
یک شنبه 19 آبان 1392, 16:15 عصر
میگم این اولیه قشنگ تر نیست؟ :لبخند: شبیه ماه توی آسمونه جالبه
منظورتون عکسی هست که داخلش نوشته صفحه اصلی؟
راستش یه طرح بود که می خواستم شبیه اون بشه وگرنه اگه آدم دست خودش باشه خیلی می تونه کارای مختلف و قشنگی انجام بده.:لبخندساده: