全站图片圆角、放大、灰白、阴影效果
[i=s] 本帖最後由 李奥 於 2018-8-13 11:27 編輯 [/i].
.
{:9_393:} 只需在第三方统计加入一段css代码就行了。
下面的代码只是示范，你可保留需要的代码，其他删除即可。[code]
<style>
img{
cursor: pointer;
transition: all .7s ease;
}
img:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
}
img{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
img{
-moz-box-shadow:2px 2px 1px #333333; -webkit-box-shadow:2px 2px 1px #333333; box-shadow:2px 2px 1px #333333;
}
img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
img:hover{-webkit-filter: none;filter: none;}
</style>
[/code].
.
.
{:9_382:} 说明：代码要放在<style> </style>里面哦。
.
.
这段是鼠标移到图片时出现放大效果，scale(1.2)数值越大图片越大，越小就缩小。[code]img:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);
}[/code].
.
.
图片圆角，30px就是圆角范围。[code]
img{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
[/code].
.
.
这段是图片阴影效果[code]img{
-moz-box-shadow:2px 2px 1px #333333; -webkit-box-shadow:2px 2px 1px #333333; box-shadow:2px 2px 1px #333333;
}[/code].
.
.
这段是图片全部变灰白，鼠标移到图片时还原色彩。[code]
img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
img:hover{-webkit-filter: none;filter: none;}
[/code].
.
.
.
.
.
.
[b][size=4]【追加三个旋转代码】[/size][/b]
.
..
卡片翻转效果[code]img:hover{
transform: rotateY(-180deg);
}
img{
transform: rotateY(0deg);
transition: 1.5s;
}
img:hover{
transform: rotateY(180deg);
}[/code].
.
.
.
鼠标移到图片旋转和离开就还原[code]
img{
transition:1s;
}
img:hover{
transition: width 2s ,height 2s, transform 2s;
transition-timing-function: ease;
transform: rotate(360deg);
}
[/code].
.
.
图片循环旋转[code]@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
img{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
img{border-radius: 250px;}[/code].
.
..
.
.
{:9_388:} 以上代码只是从网上搜索所得，不排除有多余的代码存在。请你自行测试啦。
.
.
. 来支持一个先~;P [i=s] 本帖最後由 李奥 於 2018-8-7 18:20 編輯 [/i]
{:9_373:} 若不需要那些效果，只需删除对应的代码即可。 很棒的教程，如果不放入第三方，而是通过修改模板文件能否实现呢？ [b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293181&ptid=34643]4#[/url] [i]网雨霏霏[/i] [/b]
放在营运---站点广告也可以哦！不过最后两段代码我没加进去，论坛的图片都变成灰灰的很难看。。。 [b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293185&ptid=34643]5#[/url] [i]無名.[/i] [/b]
这个论坛用的是dz7.2的版本，并没有你说的这个
另外，放入广告里会被浏览器直接拦截，不是最佳方案 [b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293187&ptid=34643]6#[/url] [i]网雨霏霏[/i] [/b]
不会吧！之前安装无界他们的小人，烟花等等那些都是放广告位，浏览器不会拦截哦！貌似多姿多彩的烟花也是放广告位。。。 [i=s] 本帖最後由 李奥 於 2018-8-7 21:21 編輯 [/i]
[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293181&ptid=34643]4#[/url] [i]网雨霏霏[/i] [/b]
{:9_320:} 那就不清楚了，放在第三方统计会影响全站的。看看有哪个高手会设置吧。（我不会） [i=s] 本帖最後由 李奥 於 2018-8-7 21:33 編輯 [/i]
[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293185&ptid=34643]5#[/url] [i]無名.[/i] [/b]
{:9_369:}那个只是一次过示范全部代码罢了，然后保留需要的，其他的删除即可。 [b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293190&ptid=34643]9#[/url] [i]李奥[/i] [/b]
嗯嗯！忘了说声谢谢！我放在广告位正在用着;P [i=s] 本帖最後由 李奥 於 2018-8-8 08:57 編輯 [/i]
[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293187&ptid=34643]6#[/url] [i]网雨霏霏[/i] [/b]
7.2都可以自定义广告的 [b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293192&ptid=34643]11#[/url] [i]李奥[/i] [/b]
我知道有，但是入口和他说的不一样 [i=s] 本帖最後由 李奥 於 2018-8-8 08:58 編輯 [/i]
[b]回復 [url=http://www.sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293193&ptid=34643]12#[/url] [i]网雨霏霏[/i] [/b]
可能他说的是 dx3版本 感謝樓主的教學，
十分不錯的分享。 [b]回復 [url=http://sclub.com.tw/discuz/redirect.php?goto=findpost&pid=293194&ptid=34643]13#[/url] [i]李奥[/i] [/b]
你来来回回的强调有意思吗？真受不了。 放在css_append模板也可以
頁:
[1]