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

李奥

.
.
只需在第三方统计加入一段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;}

複製代碼

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

无界

放在css_append模板也可以

网雨霏霏

回復 13# 李奥


    你来来回回的强调有意思吗？真受不了。

4rphotoclub

感謝樓主的教學，
十分不錯的分享。

李奥

回復 12# 网雨霏霏


可能他说的是 dx3版本

网雨霏霏

回復 11# 李奥


    我知道有，但是入口和他说的不一样

李奥

回復 6# 网雨霏霏



7.2都可以自定义广告的

無名.

回復 9# 李奥


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

李奥

回復 5# 無名.


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

李奥

回復 4# 网雨霏霏

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