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

Css3 Animation 动画原则十

夸张手法 (Exaggeration)

夸张手法

夸张手法在漫画中是最常用来为某些动作刻画吸引力和增加戏剧性的,比如一只狼试图把自己的喉咙张得更开地去咬东西可能会表现出更恐怖或者幽默的效果。

在网页中,对象可以通过上下滑动去强调和刻画吸引力,比如在填充表单的时候生动部分会比收缩和变淡的部分更突出。

HTML
<h1>Principle 10: Exaggeration</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle ten">
    <div class="shape"></div>
</article>
CSS
.ten .shape {
  animation: ten 4s infinite linear;
  transform-origin: 50% 8em;
  top: calc(50% - 6em);
}

@keyframes ten {
  0%, 10% {
    transform: none;
    animation-timing-function: cubic-bezier(.87,-1.05,.66,1.31);
  }
  40% {
    transform: rotateZ(-45deg) scale(2);
    animation-timing-function: cubic-bezier(.16,.54,0,1.38);
  }
  70%, 100% {
    transform: rotateZ(360deg) scale(1);
  }
}

/* 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先森
  • 中国电信在“2018年度中国SDN/NFV优秀案例评选”中获奖两项

    2019年4月17日,在北京召开的“2019中国SDN/NFV/AI大会”上,举行了“2018年度中国SDN、NFV优秀案例评选”的颁奖仪式,该次活动由SDN/...

    灯塔大数据
  • sublime实现markdown浏览器预览

    attack
  • git .gitignore 忽略规则的匹配语法

    2)以“#”开头的行都会被 Git 忽略。即#开头的文件标识注释,可以使用反斜杠进行转义;

    小蔚
  • UML之状态图

      状态:是指在对象生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件和状况。

    令仔很忙
  • 锁首技术总结

    在公司实习也有一个月了,学到不少东西,不知不觉就要大四了,回首漫漫安全路,不禁感慨万千:我入安全的时间比较晚,大一大二跟着老师参加 Android 移动应用开发...

    信安之路
  • git提交后的自动化流程构建

    之前组里反映lack of infrastructure resource,比如最近这个项目每次backend server sourcecode用git cl...

    Jerry Wang
  • 算法之旅 | 快速排序法

    HTML5学堂-码匠:前几期“算法之旅”跟大家分享了冒泡排序法和选择排序法,它们都属于时间复杂度为O(n^2)的“慢”排序。今天跟大家分享多种排序算法里使用较广...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券