前端 CSS : 7# 纯 CSS 实现像极了爱情

Code4App 发布于2019-08-30 15:43 / 2637人阅读

摘要：介绍最近突然回想到之前看过的一个动画，是一个正方体向球体表示爱意，被拒绝，改变自己的小动画。不应有恨，何事长向别时圆人有悲欢离合，月有阴晴圆缺，此事古难全。此情无计可消除，才下眉头，却上心头。猪脚登场龙套们退场，猪脚登场。

介绍

最近突然回想到之前看过的一个动画，是一个正方体向球体表示爱意，被拒绝，改变自己的小动画。

找了半天终于找到了，个人感觉是一个很棒的动画，强烈安利：

《方块》

效果预览

github.io 浏览

源代码地址

https://github.com/shanyuhai1...

代码解读 1. 导演上场

这个动画中存在镜头转换，所以我们需要一个导演把控全局，写个简单效果进行测试。

场景 love 就位，导演 director 就位，龙套们 actors 就位：


  
    
      丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
      明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
      转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
    
    
      红藕香残玉簟秋。轻解罗裳，独上兰舟。云中谁寄锦书来，雁字回时，月满西楼。
      花自飘零水自流。一种相思，两处闲愁。此情无计可消除，才下眉头，却上心头。

场景过于简陋，需要美化升级一下，演员们也要稍微装饰一下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #f1f1f1;
  overflow: hidden;
}

.love {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 不定宽高垂直居中推荐 flex，此处玩玩而已 */
  width: 800px;
  height: 500px;
  background-color: #b5bfc0;
  overflow: hidden;
}

.director {
  width: 1200px;
  height: 100%;
  border: 1px dashed red;
  display: flex;
  justify-content: space-between;
}

.actors {
  width: 45%;
  border: 1px solid purple;
}

镜头 len 准备，导演试机：

.director {
  animation: len 5s linear .2s infinite;
}

@keyframes len {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-400px);
  }
}

测试完成。

2. 猪脚 cube 登场

龙套们退场，猪脚登场。

猪脚要有玉树凌风之姿，一米八的身高配上微微侧身，先来一张猪脚的海报吸引人气吧：


  
    Cube
  
  
    
      (❁´▽`❁)

h1 {
  position: absolute;
  left: 100px;
  top: 100px;
  font-size: 140px;
  letter-spacing: 6px;
  color: #fff;
  user-select: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .3);
}

.cube {
  position: absolute;
  left: 540px;
  --size: 180px;
  width: var(--size);
  height: var(--size);
  perspective: 600px;
}

.cube__body {
  position: relative;
  width: inherit;
  height: inherit;
  transform-style: preserve-3d;
  transform: rotateY(15deg);
}

.cube__face {
  position: absolute;
  width: inherit;
  height: inherit;
  opacity: .5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  background-color: lightcyan;
  border: 2px solid #fff;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .5);
}

.cube__face_front {
  transform: rotateY(0) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_back {
  transform: rotateY(180deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_left {
  transform: rotateY(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_right {
  transform: rotateY(90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_top {
  transform: rotateX(90deg) translate3d(0, 0, calc(var(--size) / 2));
}

.cube__face_bottom {
  transform: rotateX(-90deg) translate3d(0, 0, calc(var(--size) / 2));
}

猪脚表示它并不想吊威亚，那就放它下来吧，试镜发现化的妆也浓了，这张海报不合格：

.love {
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}

.cube__face {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
}

重新拍一张海报，用来宣传：

这样猪脚看起来还是眉清目秀的。

3. 替身救场

原本是计划着猪脚两个前滚翻进入下一场景，奈何缺乏动作指导无法实现（求一个动作指导帮帮猪脚），这时候就只能靠替身救场了。

猪脚的前滚翻：

.cube__body {
  animation: woo 2s linear forwards;
}

@keyframes woo {
  0% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
  }
  5% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
  }
  50% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
  }
  99% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: hidden;
  }
}

替身接替前滚翻：


  
    替身

.substitute__body {
  animation: woo_sub 2s 1.85s linear forwards;
  visibility: hidden;
}
@keyframes woo_sub {
  1% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
    visibility: hidden;
  }
  5% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(0);
    visibility: hidden;
  }
  50% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: visible;
  }
  100% {
    transform-origin: 100% 100%;
    transform: rotateY(0) rotateZ(.25turn);
    visibility: visible;
  }
}

镜头准备，再一次试镜：

场景长度不够，等下配角们站哪里？赶紧加点预算：

.director {
  width: 1700px;
}

@keyframes len {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-900px);
  }
}

4. 配角 sphere 上场

由于导演全局把控能力太差，所以需要分镜头拍摄：

.director {
  /* animation: len 6s linear .2s forwards; */
  transform: translateX(-900px);
}

.cube__body {
  /* animation: woo 2s 1s linear forwards; */
}
.substitute__body {
  /* animation: woo_sub 2s 2.85s linear forwards; */
}

配角们身高一米六，化好妆后登场：

.sphere__wrap {
  position: absolute;
  bottom: 0;
  right: -840px;
  height: 320px;
  width: 450px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.sphere {
  --sphere-size: 160px;
  width: var(--sphere-size);
  height: var(--sphere-size);
  border-radius:50%;
  box-shadow:
    0 3em 2.5em -2.5em rgba(53,64,73,.6),
    0 0 1em -0.35em rgba(255,255,255,.2),
    0 -1em 1.1em 0 rgba(255,255,255,.5) inset,
    0 0 2.5em 0 rgba(227,249,250,.4) inset;
  background:
    radial-gradient(circle at 33% -25%,rgba(227,249,250,0) 40%,rgba(0, 0, 0,.07) 50%),
    radial-gradient(circle at 50% 135%, rgba(0, 0, 0,.23) 43%,rgba(227,249,250,0)),
    radial-gradient(circle at 50% -35%, rgba(227,249,250,.8) 45%,rgba(227,249,250,0)),
    radial-gradient(circle at 50% 0, #fff,lightcyan);
  background-size: 150%, 100%, 100%, 100%;
}

喂，身为一个演员动作要丰富，不是让你站着当花瓶的：

.sphere_left {
  animation: move 1s ease-in forwards;
}
@keyframes move {
  to {
    transform: translateX(50px) rotate(.05turn);
  }
}

还要有丰富的感情，你以为是小鲜肉面无表情就可以吗：

.love {
  --color-love: #ed5a65;
}

.sphere_left::after {
  content: "❤";
  font-size: 42px;
  color: var(--color-love);
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(0);
  animation: love_gen 1s .8s linear forwards;
}

@keyframes love_gen {
  from {
    transform: scale(0) translate(0, 0);
  }
  to {
    transform: scale(1) translate(25px, -40px) rotate(-.05turn);
  }
}

OK，试镜：

看起来还不错，下一个镜头。

5. 猪脚示爱

配角们的镜头拍完了，还需要补拍猪脚示爱的镜头，这时候就要展现猪脚炸裂的演技了，从示爱到心碎：

.substitute__body::after {
  content: "❤";
  font-size: 30px;
  color: var(--color-love);
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(0);
  animation: love_vip 5s 4s linear forwards;
}

@keyframes love_vip {
  0% {
    transform: scale(0) translate(-100px, -200px);
  }
  10%, 80% {
    transform: scale(1) translate(-125px, -110px) rotate(-.25turn);
  }
  100% {
    content: "

超融合服务器私有云纯CSS 像极了第7天:CSS入门前端css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116042.html

前端 CSS : 7# 纯 CSS 实现像极了爱情

摘要：介绍最近突然回想到之前看过的一个动画，是一个正方体向球体表示爱意，被拒绝，改变自己的小动画。不应有恨，何事长向别时圆人有悲欢离合，月有阴晴圆缺，此事古难全。此情无计可消除，才下眉头，却上心头。猪脚登场龙套们退场，猪脚登场。介绍最近突然回想到之前看过的一个动画，是一个正方体向球体表示爱意，被拒绝，改变自己的小动画。找了半天终于找到了，个人感觉是一个很棒的动画，强烈安利：《方块》 ...

EscapedDog 2019-08-05 16:33 评论0 收藏0
前端 CSS : 3# 纯 CSS 实现粉色爱心

摘要：介绍原文链接感謝大佬的前端每日实战工作三个月觉得糟糕跑路顺带劝一下像我一样的新人不要急于入职一定要挑一挑回家重新补充了一下基础知识及身为一个前端结果发现已经手生了为了明年能够找到工作所以又开始练习了效果预览浏览源代码地址代码解读首先是完成结介绍原文链接感謝 comehope 大佬的 [前端每日实战] 工作三个月觉得糟糕跑路(顺带劝一下像我一样的新人, 不要急于入职, 一定要挑一...

newtrek 2019-08-05 15:51 评论0 收藏0
如何使用CSS创建巧妙的动画提示框

摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

wmui 2019-08-29 12:51 评论0 收藏0
如何使用CSS创建巧妙的动画提示框

摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

vpants 2019-08-01 17:05 评论0 收藏0
前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用过往项目 2018 年 6 月份项目汇总（共 27 个项目） 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（...

ghnor 2019-08-29 16:21 评论0 收藏0