当前位置：首页 > 网页特效 > 动画效果

Material Design风格阴影特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
你可以在任何容器上使用这些阴影效果，例子中使用一个div作为容器。

```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布局方式。

```html
.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);
}            
```
为阴影容器设置通用样式：设置固定的宽度和高度，以及背景颜色，并将它们设置为块级内联样式。

```html
.shadow {
  background: #F9F9F9;
  display: inline-block;
  width: 13vw;
  height: 13vw;
  margin: 3%;
}     
```             
然后分别为每一个阴影容器使用box-shadow属性设置不同的阴影值。

```html
.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属性来达到动画元素阴影的效果。

```html
.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);
}     
```

web299.com

Material Design风格阴影特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果