一、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. yii自己定义CLinkPager分页

    在components中自己定义LinkPager.并继承CLinkPager 代码例如以下: <? php /** * CLinkPager class file. * * @author l ...

  2. Android之使用weight属性实现控件的按比例分配空间

    从今天開始,把看书时候的知识点整理成博客, 这个比較简单,预计有经验的都用过,weight属性 在做Android布局的时候,常常遇到须要几个控件按比例分配空间的情况 比方下图效果 在底部设置两个bu ...

  3. php设计模式之桥接模式

    php设计模式之桥接模式 一.概述 桥接模式:将两个原本不相关的类结合在一起,然后利用两个类中的方法和属性,输出一份新的结果. 其实就是讲不相关的东西通过类(本例中是SendInfo)结合在一起,从而 ...

  4. linux 终端提示符

    默认的当路径一长就难看得出奇. 我的设置: export PS1="|\W$>\[\e[0m\]" 最后效果就是|目录名$> 参考:https://www.cnblog ...

  5. java监听多个组件

    import java.awt.Color; import java.awt.FlowLayout; import java.awt.event.*; import javax.swing.*; pu ...

  6. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

  7. C++之易混淆知识点一-----static详解

    1.const.mutable与volatile的区别:const表明内存被初始化以后,程序将不能对它进行修改.volatile则表明,即使程序代码没有对内存单元进行修改,但是里面的值也可能会发生变化 ...

  8. 解决IE7、IE8样式不兼容问题

    方法:要在页面中加入如下HTTP meta-tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateI ...

  9. 2，HTTP请求应答返回码

    200 OK 请求成功,一般用于Get和Post请求 300 多种选择.请求的资源可包括多个位置,响应的返回一个资源特征与地址的列表用于浏览器(client)选择 Multiple Choices 3 ...

  10. 洛谷P2770 航空路线问题 最小费用流

    Code: #include<cstdio> #include<iostream> #include<algorithm> #include<vector&g ...