一、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. ubuntu修改顶栏颜色

    title: ubuntu修改顶栏颜色 toc: false date: 2018-09-29 19:14:01 categories: methods tags: Ubuntu 编辑shell主题的 ...

  2. Chrome浏览器查看SSL证书信息

    1.https使用f12打开,选中security 如果F12打不开,可以通过最右端的自定义及控制chrome菜单,打开"更多工具"-->"开发者工具" ...

  3. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  4. JavaScript学习——使用JS完成省市二级联动

    1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...

  5. 【原创】ApacheTomcat集群在Linux下的搭建步骤

    在RedHat5(以下简称RH)上搭建ApacheTomcat的集群环境,有以下步骤: 1.首先安装apr和apr-util apr-util需要依赖于apr包,所以先安装apr, http://fi ...

  6. C++ 获取某一文件夹下的所有文件名

    //********************************************************************** // Method: 获取文件夹下所有文件 // Fu ...

  7. Hadoop_MapReduce中Mapper类和Reduce类

    在权威指南中,有个关于处理温度的MapReduce类,具体如下: 第一部分:Map public class MaxTemperatureMapper extends MapReduceBase im ...

  8. java上传文件工具类

    这个是之前整理之前所学时与使用java向邮箱发送邮件一块找到的,一起贴出来供大家参考: import java.awt.image.BufferedImage; import java.io.File ...

  9. 织梦DEDECMS系统中文章内容为空 用SQL语句如何删除？

    织梦后台里提供了清空内容为空的文章,可是发现并不好用,有些空文章还是删除不了,而有些文章不是空的,只是采到了几个字,这些无法清除,于是就手动来清除这个文章.开始是一个一个文章找,一个一个来删除,后来觉 ...

  10. NOIp2018模拟赛三十八

    爆〇啦~ A题C题不会写,B题头铁写正解: 随手过拍很自信,出分一看挂成零. 若要问我为什么?gtmdsubtask! 神tm就一个subtask要么0分要么100,结果我预处理少了一点当场去世 难受 ...