Material Design风格阴影特效

PetitQ 其他代码 2019-3-04 1.62K 0 0

这是一款 Material Design 风格阴影特效。该阴影效特效中提供了 5 种不同大小的阴影效果，使用它们可以制作出非常漂亮的 Material Design 风格阴影动画效果。

HTML 结构

你可以在任何容器上使用这些阴影效果，例子中使用一个

也想出现在这里？联系我们吧

作为容器。

```
<div class="card">
```
```
  <div class="shadow"></div>
```
```
  <div class="shadow"></div>
```
```
  <div class="shadow"></div>
```
```
  <div class="shadow"></div>
```
```
  <div class="shadow"></div>
```
```
</div>
```

CSS 样式

DEMO 中的卡片容器使用的是 flex-box 布局方式。

```
.card {
```
```
  display: flex;
```
```
  justify-content: space-around;
```
```
  background: #F2F2F2;
```
```
  width: 90vw;
```
```
  padding: 15px;
```
```
  border-radius: 3px;
```

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);

```
}
```

为阴影容器设置通用样式：设置固定的宽度和高度，以及背景颜色，并将它们设置为块级内联样式。

```
.shadow {
```
```
  background: #F9F9F9;
```
```
  display: inline-block;
```
```
  width: 13vw;
```
```
  height: 13vw;
```
```
  margin: 3%;
```
```
}
```

然后分别为每一个阴影容器使用 box-shadow 属性设置不同的阴影值。

```
.shadow:nth-child(1) {
```

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

```
}
```
```
.shadow:nth-child(2) {
```

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);

```
}
```
```
.shadow:nth-child(3) {
```

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);

```
}
```
```
.shadow:nth-child(4) {
```

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);

```
}
```
```
.shadow:nth-child(5) {
```

  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3);

```
}
```

要制作鼠标滑过时的阴影效果非常简单，只需要在鼠标滑过容器时修改阴影的大小即可。另外还有一种动画阴影的方法：通过动画伪元素的 opacity 属性来达到动画元素阴影的效果。

```
.animate-demo{
```
```
   background: #F2F2F2;
```
```
   width: 100%;
```
```
   padding: 15px;
```
```
}
```
```
.animate-shadow-1, .animate-shadow-2{
```

  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);

  -webkit-transition: box-shadow 1s ease;

```
  -o-transition: box-shadow 1s ease;
```
```
  transition: box-shadow 1s ease;
```
```
}
```
```
.animate-shadow-1:hover{
```

  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3);

```
}
```
```
.animate-shadow-2:hover{
```

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);

```
}
```

Material Design 风格阴影特效

已有 404 人购买

永久更新：
演示数据：
提取码：uv41

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

Material Design风格阴影特效

HTML 结构

CSS 样式

Material Design 风格阴影特效

相关文章

纯JS和CSS3页面滚动动画库插件

15种漂亮 css3 loading 动画特效

jQuery+CSS3精美时钟插件

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

Material Design 风格阴影特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复