zoukankan      html  css  js  c++  java
  • CSS3样式运用,悬浮立体方块

    前言

    作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用。

    我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了。现在流行扁平化设计,没有了阴影,没有了立体!

    效果图

    实现思路

    这里一共做了两边,一种是用UL,一种是用DIV啦。

    两种没什么区别,这里着重说DIV的方式。

    父容器下有三个子元素DIV,全部左浮动,然后设置z-index。选中的(突出的)DIV用另一套样式,hover

    用box-shadow属性,可以实现阴影效果,在网上还有-moz-box-shadow ,-webkit-box-shadow,这两种貌似是针对不同的游览器。

    这样,这种阴影效果就实现了。

    然后是动画切换效果,这里还是用CSS3的属性(为了撸CSS3嘛,javascript也是可以实现的)。

    用transition属性,例如 transition: color 0.5s 标记color属性变化的运动过程为0.5s,若有其他的属性变化,就加在后面,用逗号隔开。

    同理,其他的三个是针对不同浏览器的。

     1 .photoDIV_F
     2     {
     3         position:relative;
     4         z-index:1;
     5         width:380px;
     6         height:250px;
     7         float:left;
     8         color:#134f8d;
     9         border-top:#7dd302 4px solid;
    10         background-color:#FFFFFF;
    11         transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;
    12         -moz-transition:color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;
    13         -webkit-transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;
    14         -o-transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;
    15     }

    相关资源

    CSS3样式运用,悬浮立体方块:http://download.csdn.net/detail/a406502972/8060603

  • 相关阅读:
    C# 将数据导出到Excel汇总
    jquery 常用技巧
    JavaScript:世界上误解最深的语言
    对于jQuery中$.ajax方法的新认识
    JQuery上传插件Uploadify使用详解
    HTTP中Get与Post的区别
    Javascript中最常用的55个经典技巧
    C# params参数的应用
    10种JavaScript特效实例让你的网站更吸引人
    jQuery设计思想
  • 原文地址:https://www.cnblogs.com/likeli/p/4038282.html
Copyright © 2011-2022 走看看