No.3 - CSS transition 和 CSS transform 配合制作动画

任务目的

  • 深度理解掌握 transition-timing-function 以及它的意义
  • 学会配合使用 CSS transform 和CSS transition 制作流畅动画
  • 使用 CSS 伪元素触发过渡效果
  • 合理的使用 CSS 布局

任务描述

  • 在我们提供给你的 HTML 文件基础上，适当的添加 CSS transition 和 CSS transform 属性 ，实现视频 demo 中的效果；

  • 鼠标 hover 上去的时候，出现小猫笑起来的动画；
    动画 demo

    下载.html 文件

  • transition 和transform 各项子属性的值可以自定 ；

任务注意事项

  • 注意浏览器中的兼容性
  • 请注意代码风格的整齐、优雅
  • HTML 及 CSS 代码结构清晰、规范
  • 代码中含有必要的注释

实现

效果文件更新于这里.

腮红

透明度变化

1
2
3
4
.face:hover .eye-wrap .face-red{
               transition:opacity 0.6s;
               opacity: 1.0;
           }

眼睑

纵向位移

1
2
3
4
face:hover .eye-wrap .eye-bottom{
                transition:transform 0.6s;
                transform: translateY(-15px); 
            }

眼珠

变窄

1
2
3
4
5
.face:hover .eye-wrap .eye .eye-circle .eye-core{
                transition:transform 0.6s;                
                left: 50%;
                transform:scaleX(0.8)
            }

左右嘴

变圆了

1
2
3
4
5
6
7
8
9
.face:hover .mouth-wrap .left{
                transition:border-radius 0.6s;                
                border-radius:0% 40% 50% 50%;
            }

            .face:hover .mouth-wrap .right{
                transition:border-radius 0.6s;                
                border-radius:40% 0% 50% 50%;
            }

耳朵

翘起来了。

1
2
3
4
5
6
7
8
9
.face:hover~.ear-wrap .left {
                transition:transform 0.6s;
                transform: rotate(-30deg);
            }

            .face:hover~.ear-wrap .right {
                transition:transform 0.6s;
                transform: rotate(30deg);
            }

参考资料