一、box-shadow: 0 2px 15px 0 rgba(0,0,0,.15)!important

二、

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);

三、

.tofu-block-hover {
transition: opacity 0.3s,width 4s,height 4s;
border: 1px solid #e7e7e7;
padding: 18px;
background-color: #fff;
position: absolute;
border: 1px solid #00c1e0;
width: 120%;
height: 120%;
margin-top: -8%;
margin-left: -8%;
box-shadow: 0 0 8px #00c1e0;
z-index: 2;
/* opacity: 0; */
filter: alpha(opacity=0);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
}

四、

li:hover {
   　 border: 1px solid #00c1de;
　　 box-shadow: 0 0 20px rgba(0, 198, 226, 0.5);
}

五、图片高亮样式

.figure_pic {
transition: box-shadow .15s linear,-webkit-filter .3s ease-out;
box-shadow: 0 4px 8px rgba(40,40,40,.2);
-webkit-filter: saturate(1.15) contrast(1.15) brightness(1.1);
}

六、线条样式

.mod_title:before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 10px;
margin-top: -1px;
height: 2px;
background: #eee;
background: linear-gradient(to right,#eee 80%,transparent 100%);
}

七、旋转

八、动画

.ic_pagearr {
position: absolute;
bottom: 40px;
left: 50%;
z-index: 10;
background: url(http://www.xunlei.com/v2017/k_pc/public/images/ic_spr24.png) no-repeat -124px 0;
width: 38px;
height: 21px;
margin-left: -19px;
animation: page_arr 1.6s both linear infinite;
-webkit-animation: page_arr 1.6s both linear infinite;
}

@keyframes page_arr {
0% {
transform: translate(0)
}

25% {
transform: translateY(4px)
}

75% {
transform: translateY(-4px)
}

to {
transform: translate(0)
}
}

九、出场效果

<html><head>
    <meta charset="utf-8">
    <title>hn-shop</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  </head>
  <body style="zoom: 1;">
    <style>
      *{margin:;padding:;box-sizing:border-box;}
      .w{width:1000px;margin: auto;overflow:hidden;padding:20px 0px;border:1px solid #ccc;}
      .runInRight{animation-name: runInRight;animation-duration: .6s;animation-fill-mode: both;}
      @keyframes runInRight{
        %{opacity:; transform:translateX(1200px);}
        %{opacity:;transform:translateX();}
      }
      @keyframes jump{
        %,%,%,%,%,%,%{-webkit-transform:translateY();}
        %,%,%{-webkit-transform:translateY(-%);}
        %,%{-webkit-transform:translateY(%);}
      }
      @keyframes iconFade{
        %{transform: scale();}
        %{transform: scale(1.1);}
      }
      .Jump{
        -webkit-animation: jump 2s infinite;
        animation: jump 2s infinite;
      }
      .runInRight {
          animation-name: runInRight;
          animation-duration: .6s;
          animation-fill-mode: both;
      }
      .box{
         width:200px;
         padding:40px;
         background:#ddd;
         float:left;
         margin-right:20px;
         transition:all .4s;
      }
      .box:hover{
         animation: iconFade .4s both; transform-origin: left bottom;
      }
    </style>
    <div class="w">
       <div </div>
       <div </div>
       <div </div>
       <div </div>
    </div>
    <div class="w">
       <div </div>
       <div </div>
       <div </div>
       <div </div>
    </div>
   <div class="w">
       <div </div>
       <div </div>
       <div </div>
       <div </div>
    </div>
</body></html>

css常用的阴影的更多相关文章

  1. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. [Web 前端] 010 css 常用的边框设置

    css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...

  4. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  5. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  6. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  7. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  8. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. 通达OA 小飞鱼OA实施法：以项目管理的方式来推进工作流设计项目实施

    做工作流设计的项目时,有时有几十个之多的流程须要做,并且时间有限,怎样把这些流程在有限的时间内设计完毕,并且达到预定要求成为这个项目须要解决的主要问题. 为了更好的完毕此次的工作流项目实施,在这里借鉴 ...

  2. jdbc14 及 jdbc16 共存所带来的问题【未完待续】

    在JAVA中JDK版本号与JDBC版本号的一致性十分重要,开发都们经常会忽略了这一点导致非常多不必要的错误. 昨天给客户排查了一个关于EDB在JBoss中使用时关于这方面的问题,希望给大家一点启示. ...

  3. linux 数据库

    查看数据库状态:service mysqld status 启动数据库服务 service mysql start 如果出现:Another MySQL daemon already running ...

  4. vue 结合 echarts

    http://blog.csdn.net/mr_wuch/article/details/70225364

  5. Android studio 分32位64位版本吗？

    下载的时候,是不分32位和64位的.安装完成之后,在bin目录下,有studio.exe和studio64.exe这两个文件.前一个是32位的,后一个是64位的.根据自己的电脑进行选择.

  6. zzulioj--1799--wrz的压岁钱(贪心)

     1799: wrz的压岁钱 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 407  Solved: 71 SubmitStatusWeb Boa ...

  7. jquery的clone()引发的问题，下拉框点击没有反应

    此段代码是对某块元素的移位:上移.下移.对比修改前后的两段代码: 修改前: //点击移位 function move(obj,posi){ var al=$(obj).parent('li').par ...

  8. Spark Streaming 总结

    这篇文章记录我使用 Spark Streaming 进行 ETL 处理的总结,主要包含如何编程,以及遇到的问题. 环境 我在公司使用的环境如下: Spark: 2.2.0 Kakfa: 0.10.1 ...

  9. android全屏去掉title栏的多种实现方法

    android全屏去掉title栏的多种实现方法 作者: 字体:[增加 减小] 类型:转载 时间:2013-02-18我要评论 android全屏去掉title栏包括以下几个部分:实现应用中的所有ac ...

  10. miniUI打开一个新的画面（ondestroy）

    转自:http://blog.csdn.net/u012934325/article/details/77914691 需求:开发中需求通过点击父界面一个按钮弹出一个子界面,在miniUI中我们可以这 ...