一、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. s3c2440的IIC控制

    在tq2440和mini2440上都连接着EEPROM 它们作用也不过測试I2C总线能否用. 当中在mini2440上EEPROM型号是 AT24C08,在tq2440上这个型号是 AT24C02A. ...

  2. UVALive 4223 / HDU 2962 spfa + 二分

    Trucking Problem Description A certain local trucking company would like to transport some goods on ...

  3. Android 6.0 开发人员对系统权限的使用与练习（Permissions Best Practices）

    Permissions Best Practices 在安装的过程中,用户非常easy忽略权限请求. 假设一个用户相应用感觉沮丧或者操心泄漏个人信息,那么这些用户就会不用他或者卸载它. 怎样规避这个问 ...

  4. android实现自动安装

    安装: String str = "/CanavaCancel.apk"; String fileName = Environment.getExternalStorageDire ...

  5. python 3.x 学习笔记9 (面向对象)

    1.面向对象 面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物. 2.类(class): 一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都 ...

  6. Pyinstaller 1 使用PyInstaller

    使用PyInstaller pyinstaller命令的语法是: pyinstaller[ options ] script [ script ...] | spec文件 在最简单的情况下,将当前目录 ...

  7. PHP————系统常量

    PHP常量默认为大小写敏感.传统上常量标识符总是大写的. PHP常量名和其它任何 PHP 标签遵循同样的命名规则.合法的常量名以字母或下划线开始,后面跟着任何字母,数字或下划线.用正则表达式是这样表达 ...

  8. NOI2018 你的名字 后缀自动机_线段树合并_可持久化

    相当复杂的一道题,同样也相当优美.考察的知识点很多:权值线段树的可持久化合并,后缀自动机,后缀树... 考虑 $68pts$  $l=1,r=|s|$的数据:这部分相对好做一些,不过思维难度对我来说已 ...

  9. 线段树合并&&启发式合并笔记

    这俩东西听起来很高端,实际上很好写,应用也很多~ 线段树合并 线段树合并,顾名思义,就是建立一棵新的线段树保存原有的两颗线段树的信息. 考虑如何合并,对于一个结点,如果两颗线段树都有此位置的结点,则直 ...

  10. C#-反射知识点（转载）

    反射的用途:    (1)使用Assembly定义和加载程序集,加载在程序集清单中列出模块,以及从此程序集中查找类型并创建该类型的实例.     (2)使用Module了解包含模块的程序集以及模块中的 ...