淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2224|回复: 16
收起左侧

比较简单的CSS3产品展示图

[复制链接]
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-6-10 17:17:50 | 显示全部楼层 |阅读模式
    原谅图片渣渣 随便放的  代码还是需要替换..  把CSS中的绝对定位替换一下 就OK了

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <style type="text/css">
    .ih-item {position: relative;-webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
    .ih-item a {color: #333;}
    .ih-item a:hover {text-decoration: none;}
    .ih-item img {width: 100%;height: 100%;}
    .ih-item.circle {position: relative;width: 220px;height: 220px;border-radius: 50%;}
    .ih-item.circle .img {position: relative;width: 220px;height: 220px;border-radius: 50%;}
    .ih-item.circle .img:before {position: absolute;display: block;content: '';width: 100%;height: 100%;border-radius: 50%;box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);-webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
    .ih-item.circle .img img {border-radius: 50%;}
    .ih-item.circle .info {position: absolute;top: 0;bottom: 0;left: 0;right: 0;text-align: center;border-radius: 50%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
    .ih-item.circle.effect .img {z-index: 11;-webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
    .ih-item.circle.effect.colored .info {background: #1a4a72;}
    .ih-item.circle.effect .info {background: #333333;opacity: 0;pointer-events: none;-webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;}
    .ih-item.circle.effect .info h3 {color: #fff;text-transform: uppercase;position: relative;letter-spacing: 2px;font-size: 22px;margin: 0 30px;padding: 55px 0 0 0;height: 110px;text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);}
    .ih-item.circle.effect .info p {color: #bbb;padding: 10px 5px;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255, 255, 255, 0.5);}
    .ih-item.circle.effect.left_to_right .img {-webkit-transform: scale(1) translateX(0);-moz-transform: scale(1) translateX(0);-ms-transform: scale(1) translateX(0);-o-transform: scale(1) translateX(0);transform: scale(1) translateX(0);}
    .ih-item.circle.effect.left_to_right .info {-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);transform: translateX(-100%);}
    .ih-item.circle.effect.left_to_right a:hover .img {-webkit-transform: scale(0.5) translateX(100%);-moz-transform: scale(0.5) translateX(100%);-ms-transform: scale(0.5) translateX(100%);-o-transform: scale(0.5) translateX(100%);transform: scale(0.5) translateX(100%);}
    .ih-item.circle.effect.left_to_right a:hover .info {opacity: 1;-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
    </style>
    <div class="ih-item circle effect left_to_right">
            <a href="#">
            <div class="img">
                    <img src="http://img01.taobaocdn.com/imgextra/i1/429413615/TB2JpxXcpXXXXaxXXXXXXXXXXXX_!!429413615.png" alt="img" />
            </div>
            <div class="info">
                    <h3>EC590</h3>
                    <p>立即购买</p>
            </div>
            </a>
    </div>
    </body>
    </html>



    直接运行便可看到效果

    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    大哭
    昨天 17:27
  • 签到天数: 720 天

    连续签到: 1 天

    [LV.9]已臻大成

    32

    主题

    742

    帖子

    13万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    135338

    最佳新人热心会员

    QQ
    发表于 2015-6-10 17:32:03 | 显示全部楼层
    不错,收藏了。~~~~~
    http://eyunsj.taobao.com/个人接单淘宝主页
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-6-10 17:35:30 | 显示全部楼层
    没CSS权限怎搞不了

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-6-10 17:53:19 | 显示全部楼层
    凌剑君 发表于 2015-6-10 17:35
    没CSS权限怎搞不了

    貌似可以放在店招的CSS里面吧?
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-12-1 19:08
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2015-6-11 00:06:19 | 显示全部楼层
    Mystery 发表于 2015-6-10 17:53
    貌似可以放在店招的CSS里面吧?

    这样还不能调用到的

    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-6-11 08:47:02 | 显示全部楼层

    呃 不是很清楚 没有CSS要怎么调用
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-6-11 10:00:32 | 显示全部楼层
    Mystery 发表于 2015-6-10 17:53
    貌似可以放在店招的CSS里面吧?

    没有特殊手段是用不了的

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-6-11 10:31:07 | 显示全部楼层
    凌剑君 发表于 2015-6-11 10:00
    没有特殊手段是用不了的

    好吧。。我下次搞一些可以直接用的。。。

    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-12-1 19:08
  • 签到天数: 1165 天

    连续签到: 1 天

    [LV.10]功行圆满

    59

    主题

    6125

    帖子

    53万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    539106

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2015-6-11 12:01:46 | 显示全部楼层
    Mystery 发表于 2015-6-11 08:47
    呃 不是很清楚 没有CSS要怎么调用

    widget破解很快封了,用这个大神的方法,调用头部导航能写入CSS就行了
    http://www.taobaoux.com/thread-21250-1-1.html

    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情
    吐舌头
    2015-10-17 23:55
  • 签到天数: 25 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    15

    帖子

    7293

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7293

    发表于 2015-6-11 13:29:11 | 显示全部楼层
    这也叫简单?

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-10 14:59 , Processed in 0.111714 second(s), 20 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表