一、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. 深搜解Riding the Fences

    Riding the Fences Farmer John owns a large number of fences that must be repairedannually. He traver ...

  2. m_Orchestrate learning system---十九、局部变量和块变量是什么

    m_Orchestrate learning system---十九.局部变量和块变量是什么 一.总结 一句话总结:下面的global的使用情况可以很好的解释这个问题 这是在一个函数里面,只不过里面有 ...

  3. （八）统一配置中心-Config

    对于配置的重要性,我想我不用进行任何强调,大家都可以明白其重要性.在普通单体应用,我们常使用配置文件(application(*).properties(yml))管理应用的所有配置.这些配置文件在单 ...

  4. yum 命令讲解

    (一)yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定 ...

  5. （转载） Android开发mac /dev/kvm is not found

    Android开发mac /dev/kvm is not found 标签: KVMAndroid开发KVM is not found芒果Android芒果iOS 2016-10-29 16:31 2 ...

  6. 使用Mapping实现的以太坊智能合约的代码

    Step 1: 创建一个基础合约 pragma solidity ^0.4.7; contract Coin { address public minter; mapping (address =&g ...

  7. Jlink如何校验Hex

    打开SEGGER J-Flash ARM,记住必须设置好工程属性后才能校验,否则校验和为0 设置好工程属性后,直接将Hex拖入到工程中即可.在LOG窗口中会显示CRC的值 如何校验芯片中的程序的版本号 ...

  8. HOJ 1867 经理的烦恼 【 树状数组 】

    题意:给出一个区间,求这个区间里面素数的个数 这道题wa了好多次---是因为add操作没有写对 每次更新的时候,应该先判断没有加上y是不是质数,加上了y是不是质数 如果从质数变成不是质数,那么add( ...

  9. java爬虫的selenium基础使用

    实用博客  selenium java教程 具体项目运用 项目背景:从西安市人民政府网站上获取到县区新闻,从下图可以看出“区县热点”是需要在页面中进行点击的,这里页面使用的是javascript的函数 ...

  10. TP5 分页类，自定义样式

    结合X-admin 后台框架 在做项目,为了保持分页风格的一致,所以需要自定义 一个分页类. 一.在项目的 extend 目录,创建 cus 目录 二.创建 Page 分页类,代码如下 <?ph ...