免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 全站图片圆角、放大、灰白、阴影效果 [打印本頁]
作者: 李奥    時間: 2018-8-7 15:45     標題: 全站图片圆角、放大、灰白、阴影效果

本帖最後由 李奥 於 2018-8-13 11:27 編輯

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

  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. }

  14. img{border-radius: 250px;}
複製代碼
.
.
..
.
.
以上代码只是从网上搜索所得，不排除有多余的代码存在。请你自行测试啦。
.
.
.
作者: 郑爽中文网    時間: 2018-8-7 16:09

来支持一个先~
作者: 李奥    時間: 2018-8-7 18:09

本帖最後由 李奥 於 2018-8-7 18:20 編輯

若不需要那些效果，只需删除对应的代码即可。
作者: 网雨霏霏    時間: 2018-8-7 18:26

很棒的教程，如果不放入第三方，而是通过修改模板文件能否实现呢？
作者: 無名.    時間: 2018-8-7 19:16

回復 4# 网雨霏霏


    放在营运---站点广告也可以哦！不过最后两段代码我没加进去，论坛的图片都变成灰灰的很难看。。。
作者: 网雨霏霏    時間: 2018-8-7 20:44

回復 5# 無名.


    这个论坛用的是dz7.2的版本，并没有你说的这个
另外，放入广告里会被浏览器直接拦截，不是最佳方案
作者: 無名.    時間: 2018-8-7 21:15

回復 6# 网雨霏霏


    不会吧！之前安装无界他们的小人，烟花等等那些都是放广告位，浏览器不会拦截哦！貌似多姿多彩的烟花也是放广告位。。。
作者: 李奥    時間: 2018-8-7 21:16

本帖最後由 李奥 於 2018-8-7 21:21 編輯

回復 4# 网雨霏霏

那就不清楚了，放在第三方统计会影响全站的。看看有哪个高手会设置吧。（我不会）
作者: 李奥    時間: 2018-8-7 21:17

本帖最後由 李奥 於 2018-8-7 21:33 編輯

回復 5# 無名.


    那个只是一次过示范全部代码罢了，然后保留需要的，其他的删除即可。
作者: 無名.    時間: 2018-8-7 21:20

回復 9# 李奥


    嗯嗯！忘了说声谢谢！我放在广告位正在用着
作者: 李奥    時間: 2018-8-7 21:26

本帖最後由 李奥 於 2018-8-8 08:57 編輯

回復 6# 网雨霏霏



7.2都可以自定义广告的
作者: 网雨霏霏    時間: 2018-8-7 21:37

回復 11# 李奥


    我知道有，但是入口和他说的不一样
作者: 李奥    時間: 2018-8-7 21:47

本帖最後由 李奥 於 2018-8-8 08:58 編輯

回復 12# 网雨霏霏


可能他说的是 dx3版本
作者: 4rphotoclub    時間: 2018-8-8 00:15

感謝樓主的教學，
十分不錯的分享。
作者: 网雨霏霏    時間: 2018-8-8 08:35

回復 13# 李奥


    你来来回回的强调有意思吗？真受不了。
作者: 无界    時間: 2018-8-8 10:44

放在css_append模板也可以



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://xclub.tw/discuz/) Powered by Discuz! 7.2