[分享] 全站图片圆角、放大、灰白、阴影效果

李奥

.
.
只需在第三方统计加入一段css代码就行了。
下面的代码只是示范，你可保留需要的代码，其他删除即可。

1. <style>
   
2. img{
   
3.         cursor: pointer;
   
4.         transition: all .7s ease;
   
5. }
   
6. img:hover{
   
7. -moz-transform:scale(1.2);
   
8. -webkit-transform:scale(1.2);
   
9. -o-transform:scale(1.2);
   
10. -ms-transform:scale(1.2);
    
11. transform:scale(1.2);
    
12. }
    
13. img{
    
14.         -webkit-border-radius: 30px;
    
15.         -moz-border-radius: 30px;
    
16.         border-radius: 30px;
    
17. }
    
18. img{
    
19. -moz-box-shadow:2px 2px 1px #333333; -webkit-box-shadow:2px 2px 1px #333333; box-shadow:2px 2px 1px #333333;
    
20. }
    
21. img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    
22. img:hover{-webkit-filter: none;filter: none;}
    
23. </style>

複製代碼

.
.
.
说明：代码要放在<style> </style>里面哦。
.
.
这段是鼠标移到图片时出现放大效果，scale(1.2)数值越大图片越大，越小就缩小。

1. img:hover{
   
2. -moz-transform:scale(1.2);
   
3. -webkit-transform:scale(1.2);
   
4. -o-transform:scale(1.2);
   
5. -ms-transform:scale(1.2);
   
6. transform:scale(1.2);
   
7. }

複製代碼

.
.
.
图片圆角，30px就是圆角范围。

1. img{
   
2.         -webkit-border-radius: 30px;
   
3.         -moz-border-radius: 30px;
   
4.         border-radius: 30px;
   
5. }

複製代碼

.
.
.
这段是图片阴影效果

1. img{
   
2. -moz-box-shadow:2px 2px 1px #333333; -webkit-box-shadow:2px 2px 1px #333333; box-shadow:2px 2px 1px #333333;
   
3. }

複製代碼

.
.
.
这段是图片全部变灰白，鼠标移到图片时还原色彩。

1. img {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
   
2. img:hover{-webkit-filter: none;filter: none;}

複製代碼

.
.
.
.
.
.
.
【追加三个旋转代码】
.
..
卡片翻转效果

1. img:hover{
   
2.     transform: rotateY(-180deg);
   
3. }
   
4. img{
   
5.     transform: rotateY(0deg);
   
6.     transition: 1.5s;
   
7. }
   
8. img:hover{
   
9.     transform: rotateY(180deg);
   
10. }

複製代碼

.
.
.
.
鼠标移到图片旋转和离开就还原

1. img{
   
2. transition:1s;
   
3. }
   
4. img:hover{
   
5. transition: width 2s ,height 2s, transform 2s;
   
6. transition-timing-function: ease;
   
7. transform: rotate(360deg);
   
8. }

複製代碼

.
.
.
图片循环旋转

1. @-webkit-keyframes rotation{
   
2. from {-webkit-transform: rotate(0deg);}
   
3. to {-webkit-transform: rotate(360deg);}
   
4. }
   
5. 
   
6. img{
   
7. -webkit-transform: rotate(360deg);
   
8. animation: rotation 3s linear infinite;
   
9. -moz-animation: rotation 3s linear infinite;
   
10. -webkit-animation: rotation 3s linear infinite;
    
11. -o-animation: rotation 3s linear infinite;
    
12. }
    
13. 
    
14. img{border-radius: 250px;}

複製代碼

.
.
..
.
.
以上代码只是从网上搜索所得，不排除有多余的代码存在。请你自行测试啦。
.
.
.

郑爽中文网

来支持一个先~

李奥

若不需要那些效果，只需删除对应的代码即可。

网雨霏霏

很棒的教程，如果不放入第三方，而是通过修改模板文件能否实现呢？

無名.

回復 4# 网雨霏霏


    放在营运---站点广告也可以哦！不过最后两段代码我没加进去，论坛的图片都变成灰灰的很难看。。。

网雨霏霏

回復 5# 無名.


    这个论坛用的是dz7.2的版本，并没有你说的这个
另外，放入广告里会被浏览器直接拦截，不是最佳方案

無名.

回復 6# 网雨霏霏


    不会吧！之前安装无界他们的小人，烟花等等那些都是放广告位，浏览器不会拦截哦！貌似多姿多彩的烟花也是放广告位。。。

李奥

回復 4# 网雨霏霏

那就不清楚了，放在第三方统计会影响全站的。看看有哪个高手会设置吧。（我不会）

李奥

回復 5# 無名.


    那个只是一次过示范全部代码罢了，然后保留需要的，其他的删除即可。

無名.

回復 9# 李奥


    嗯嗯！忘了说声谢谢！我放在广告位正在用着