- صفحه اصلي قالب گراف
- انجمن
- آپلود سنتر
- تبليغات
- ورود
- عضويت
- خوراک
- نقشه
- تماس با ما
- ارسال پيام به مدير در انجمن ghalebgraph@gmail.com\09394943902
استایل چرخش ۳۶۰ درجه لوگو دوستان و تصاویر سایتبازديد : 421
در واقع کدی که در ادامه قرار هستش قرار بدم ، می تونید برای همه ی
تصاویر سایت ازش استفاده کنید اما بهترین استفادش به نظرم برای لوگو دوستان
هستش که ما عنوان مطلب رو هم همین قرار دادیم.
برای این که تمام تصاویر سایتتون این استایل رو نگیره شما باید شیوه
نامه زیر رو به یک کلاس یا آیدی خاص اضافه کنید تا فقط همون قسمت تصاویرش
بچرخه ! ما اینجا کدهای زیر رو به کلاس logo اضافه کردیم ، حواستون باشه.
کد:
.logo img {-webkit-border-radius: 0.1px;-moz-border-radius: 0.1px;border-radius: 0.1px;width: 40px;height: 40px;transition: all 1s;}.logo img:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;transform: rotate(360deg);opacity: .7;}کته این که گوشه های تصویر هم حین گردش گرد و قشنگ میشه . کدهای بالا رو در
فایل style.css طبق گفته های بالا با تغییر نام کلاس logo متناسب با قالب
خودتون قرار بدید.
demo
کد:
<html><head>
<style>
.logo img {
-webkit-border-radius: 0.1px;
-moz-border-radius: 0.1px;
border-radius: 0.1px;
width: 40px;
height: 40px;
transition: all 1s;
}
.logo img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
transform: rotate(360deg);
opacity: .7;
}
</style>
</head>
<body>
<p class="logo" style="text-align: center;">
<a target="_blank" title="Mohammad-Ra3ul" href=""><img
src="http://upload.hypertemp.ir/uploads/93_10_logo.gif"
alt="Mohammad-Ra3ul"></a>
</p>
<body>
</html>
 تشکر شده: |
1 کاربر از fbtnt به خاطر اين مطلب مفيد تشکر کرده اند:
|
مرسی
امضاي کاربر :
