专栏首页grain先森Css3 Animation 动画原则十一

Css3 Animation 动画原则十一

扎实的描绘 (Solid drawing)

扎实的描绘

当动画对象在三维中应该加倍注意确保它们遵循透视原则。因为人们习惯了生活在三维世界里,如果对象表现得与实际不符,会让它看起来很糟糕。

如今浏览器对三维变换的支持已经不错,这意味着我们可以在场景里旋转和放置三维对象,浏览器能自动控制它们的转换。

HTML
<h1>Principle 11: Solid drawing</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle eleven">
    <div class="shape">
      <div class="container">
        <span class="front"></span>
        <span class="back"></span>
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
    </div>
</article>
CSS
.eleven .shape {
  background: none;
  border: none;
  perspective: 400px;
  perspective-origin: center;
}
.eleven .shape .container {
  animation: eleven 4s infinite cubic-bezier(.6,-0.44,.37,1.44);
  transform-style: preserve-3d;
}
.eleven .shape span {
    display: block;
    position: absolute;
    opacity: 1;
    width: 4em;
    height: 4em;
    border: 1em solid #fff;
    background: #2d97db;
}
.eleven .shape span.front {
  transform: translateZ(3em);
}
.eleven .shape span.back {
  transform: translateZ(-3em);
}
.eleven .shape span.left {
  transform: rotateY(-90deg) translateZ(-3em);
}
.eleven .shape span.right {
  transform: rotateY(-90deg) translateZ(3em);
}
.eleven .shape span.top {
  transform: rotateX(-90deg) translateZ(-3em);
}
.eleven .shape span.bottom {
  transform: rotateX(-90deg) translateZ(3em);
}

@keyframes eleven {
  0% {
    opacity: 0;
  }
  10%, 40% {
    transform: none;
    opacity: 1;
  }
  60%, 75% {
    transform: rotateX(-20deg) rotateY(-45deg) translateY(4em);
    animation-timing-function: cubic-bezier(1,-0.05,.43,-0.16);
    opacity: 1;
  }
  100% {
    transform: translateZ(-180em) translateX(20em);
    opacity: 0;
  }
}

/* General styling */
body {
  margin: 0;
  background: #e9b59f;
  font-family: HelveticaNeue, Arial, Sans-serif;
  color: #fff;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 300;
}

h2 {
  font-size: 0.75em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

a {
  text-decoration: none;
  color: #333;
}

.principle {
  width: 100%;
  height: 100vh;
  position: relative;
}

.shape {
  background: #2d97db;
  border: 1em solid #fff;
  width: 4em;
  height: 4em;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
}

—— END ——

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css3 Animation 动画原则八

    虽然主动画正在发生,次要动作可以增强它的效果。这就好比某人在走路的时候摆动手臂和倾斜脑袋,或者弹性球弹起的时候扬起一些灰尘。

    grain先森
  • Css3 Animation 动画原则三

    演出布局是确保对象在场景中得以聚焦,让场景中的其它对象和视觉在主动画发生的地方让位。这意味着要么把主动画放到突出的位置,要么模糊其它元件来让用户专注于看他们需要...

    grain先森
  • Css3 Animation 动画原则七

    虽然对象是更逼真了,当它们遵循「缓入缓出」的时候它们很少沿直线运动——它们倾向于沿弧线运动。

    grain先森
  • 使用MongoDB的支持Linq 驱动NoRM

    MongoDB的驱动有好几个,分布式文件存储的数据库开源项目MongoDB里使用的是github.com/samus/mongodb-csharp,monogo...

    张善友
  • 删除Discuz首页“今日”“昨日”“欢迎新会员”等文字

    进入templeta/default/forum/Discuz.htm   (使用非默认模版的请修改当前使用模版的discuz.htm)删除以下代码即可

    汐楓
  • 关于webview调用js出现has no method 'toString'

    在android4.2以前,注入步骤如下: webview.getSetting().setJavaScriptEnable(true);   class Js...

    xiangzhihong
  • 【Golang语言社区】H5游戏开发-纯javascript模仿微信打飞机小游戏

    纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅。具有分数统计,里面的JS封装类中包括有创建飞机类、...

    李海彬
  • 盘点Linux运维常用工具(一)-web篇之httpd

    老油条IT记
  • 【Android XML】Android XML 转 Java Code 系列之 Selector(2)

    今天我们要把drawable下的selector的XML文件转换成Java代码。(打包进jar,不依赖apk)

    sickworm
  • 【Android XML】Android XML 转 Java Code 系列之 style(3)

    最近一个月把代码重构了一遍, 感觉舒服多了, 但总体开发进度没有变化.. 今天聊聊把style属性转换成Java代码的办法

    sickworm

扫码关注云+社区

领取腾讯云代金券