淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1106|回复: 8
收起左侧

作死/发一个html5小交叉+变暗/大神绕道勿喷

[复制链接]
  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
    发表于 2016-1-6 14:38:36 | 显示全部楼层 |阅读模式
    1. <style>
    2. div.section.collection_description {margin: 0 0 1.5em;}
    3. .liu_con div.collection_nav {margin-bottom: 1.5em;}
    4. .product_row img, .product_image_col img, .article img, .blog_content img, .section img, .thumbnail img, .logo img, .page img, .sidebar img, .cart_image img, .sub-footer img, #target img {height: auto;max-width: 100%;}
    5. div.liu_con {margin: 0 auto;padding: 20px 0;}
    6. div.content {padding: 110px 0 0;}
    7. div.section {margin: 10px 0;}
    8. .liu_con .featured_links .column {margin-bottom: 20px;}
    9. .featured_links .image_liu_con {background-color: #000;line-height: 0;position: relative;}
    10. .featured_links a img {transition: opacity 0.3s ease-in-out 0s;}
    11. .featured_links a:hover img {opacity: 0.8;}
    12. .featured_links a span {bottom: 50%;color: #ffffff;font-family: "Cabin";font-size: 12px; font-weight: bold; left: 0;letter-spacing: 1.3px;margin: 0 40px;opacity: 0.9;padding: 0 10px;position: absolute;right: 0;text-align: center;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);text-transform: uppercase;transition: color 0.3s ease 0s;z-index: 2;}
    13. .featured_links a span::before, .featured_links a span::after {background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    14.     content: "";height: 2px;left: 0;margin-top: -1px;pointer-events: none;position: absolute;top: 50%;transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;width: 100%;z-index: 1;}
    15. .featured_links a span::before {transform: translateY(-20px);}
    16. .featured_links a span::after {transform: translateY(20px);}
    17. .featured_links a:hover span, .featured_links a:focus span {color: #ffffff;opacity: 1;}
    18. .featured_links a:hover span::before, .featured_links a:hover span::after, .featured_links a:focus span::before, .featured_links a:focus span::after {background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0;}
    19. .featured_links a:hover span::before, .featured_links a:focus span::before {transform: rotate(45deg);}
    20. .featured_links a:hover span::after, .featured_links a:focus span::after {transform: rotate(-45deg);}
    21. div.liu_con div.breadcrumb {font-size: 12px;}
    22. div.liu_con div.breadcrumb_text {margin-bottom: 1em;}
    23. .featured_content p {margin-bottom: 0;}
    24. .flex-pauseplay span {text-transform: capitalize;}
    25. .liu_con {margin: 0 auto;padding: 0;position: relative;width: 1200px;}
    26. .column, .columns {display: inline;float: left;margin-left: 10px;margin-right: 10px;}
    27. .column.alpha, .columns.alpha {margin-left: 0;}
    28. .column.omega, .columns.omega {margin-right: 0;}
    29. .liu_con .one-third.column {width: 380px;}
    30. </style>

    31. <div style="padding-top: 20px" class="liu_con content">
    32.   <div class="sixteen columns featured_links">
    33.     <div class="section clearfix">
    34.       <div class="one-third column alpha">
    35.         <a >
    36.           <div class="image_liu_con">
    37.             <img alt="Handstitched Portfolios" src="http://cdn.shopify.com/s/files/1/0287/7476/t/5/assets/feature1.jpg?2454961142751547875">
    38.             <span>Handstitched Portfolios</span>
    39.           </div>
    40.         </a>
    41.       </div>
    42.       <div class="one-third column">
    43.         <a >
    44.           <div class="image_liu_con">
    45.             <img alt="International Shipping" src="http://cdn.shopify.com/s/files/1/0287/7476/t/5/assets/feature2.jpg?2454961142751547875">
    46.             <span>International Shipping</span>
    47.           </div>
    48.         </a>
    49.       </div>
    50.       <div class="one-third column omega">
    51.         <a >
    52.           <div class="image_liu_con">
    53.             <img alt="Pour Over" src="http://cdn.shopify.com/s/files/1/0287/7476/t/5/assets/feature3.jpg?2454961142751547875">
    54.             <span>Pour Over</span>
    55.           </div>
    56.         </a>
    57.       </div>
    58.     </div>
    59.   </div>
    60.   </div>
    复制代码
    fontpage另存为html文档打开,一起围观吧,脚德以后平面设计都要改行,哈哈


    只要你还有一口气就不能放弃
  • TA的每日心情
    抱抱
    6 小时前
  • 签到天数: 463 天

    连续签到: 2 天

    [LV.9]已臻大成

    11

    主题

    163

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    63948

    发表于 2016-1-6 15:16:12 | 显示全部楼层
    唉,天猫无法直接使用,但多谢大神

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


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

  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
     楼主| 发表于 2016-1-6 15:19:54 | 显示全部楼层
    这个好像也是奥,我也正在适应天猫淘宝的各种借口,等待一下,我会全部改一下
    只要你还有一口气就不能放弃
  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45073

    最佳新人热心会员

    QQ
    发表于 2016-1-7 08:47:32 | 显示全部楼层
    楼主,鼠标放上去后图片亮度会发生变化,这叫什么效果来着?求科普啊!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情
    加油
    2016-9-9 10:00
  • 签到天数: 23 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    9

    主题

    48

    帖子

    4703

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4703

    QQ
     楼主| 发表于 2016-1-7 09:25:49 | 显示全部楼层
    龙万山 发表于 2016-1-6 21:47
    楼主,鼠标放上去后图片亮度会发生变化,这叫什么效果来着?求科普啊!
    ...

    这个就是一个html5遮罩效果啊,改变他的亮度啊


    点评

    又涨了一 点姿势,谢谢楼主!  发表于 2016-1-7 11:02
    只要你还有一口气就不能放弃
  • TA的每日心情
    加油
    2016-11-4 21:06
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    649

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23710

    淘宝钻级店美工最佳新人热心会员

    QQ
    发表于 2016-1-7 10:50:28 | 显示全部楼层
    我不是大神 所以我毫不犹豫的过来了

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


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

  • TA的每日心情
    思考
    2016-9-5 20:43
  • 签到天数: 9 天

    连续签到: 1 天

    [LV.3]武林新秀

    0

    主题

    16

    帖子

    1699

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1699

    发表于 2016-3-7 10:53:02 | 显示全部楼层

    我不是大神 所以我毫不犹豫的过来了

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


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

  • TA的每日心情
    加油
    2016-4-29 11:56
  • 签到天数: 47 天

    连续签到: 1 天

    [LV.5]略有小成

    0

    主题

    59

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10830

    发表于 2016-3-8 17:53:38 | 显示全部楼层


    我不是大神 所以我毫不犹豫的过来了

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-3 14:46 , Processed in 0.166808 second(s), 25 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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