CSS3 掉落的碟子

Plate drop. 点击屏幕出现碟子掉落动画。

plate,drop

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3493
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25911/wood_planks_03_1.jpg");
  background-size: cover; }

@keyframes drop-plate {
  0% {
    transform: translateY(-300%) scale(3); }

50% {
    transform: skewX(2deg) skewY(2deg); }

60% {
    transform: skewX(1.8deg) skewY(-1.8deg) translateY(-4%); }

70% {
    transform: skewX(-1deg) skewY(0.7deg); }

80% {
    transform: skewX(-0.4deg) skewY(-0.3deg) translateY(-1%); }

90% {
    transform: skewX(0.2deg) skewY(0.2deg); }

100% {
    transform: none; } }

.animate .plate {
  animation: drop-plate 0.8s ease-in; }

.plate, .plate::after {
  position: absolute;
  top: 50%;
  left: 50%; }

.plate {
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), radial-gradient(50% 50%, rgba(0, 0, 0, 0.04) 62%, rgba(0, 0, 0, 0.04) 67%, rgba(0, 0, 0, 0.01) 80%, rgba(0, 0, 0, 0) 100%);
  background-color: #eee;
  width: 154px;
  height: 154px;
  border-radius: 77px;
  margin: -77px;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25); }

.plate::after {
  content: '';
  display: block;
  box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.03);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
  background-clip: content-box;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  margin: -48px; }

HTML

Plate drop. 点击屏幕出现碟子掉落动画。

plate,drop

编辑器支持Emmet

快捷键

Plate drop. 点击屏幕出现碟子掉落动画。

plate,drop

TweenMax.js+Three.js 3D数字掉落动效的倒计时动画

使用CSS3给Owl Carousel插件实现的幻灯片添加镜头拉近特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：