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

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

阅读量：4649 次

发布时间：2019-06-09

本文共 2032 字，大约阅读时间需要 6 分钟。

课程概述

作业提交截止时间：09-01

任务目的

深度理解掌握 transition-timing-function 以及它的意义

学会配合使用 CSS transform 和CSS transition 制作流畅动画

使用 CSS 伪元素触发过渡效果

合理的使用 CSS 布局

任务描述

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

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

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

对 CSS 布局比较感兴趣的同学，在学有余力的情况下，可以尝试自己用 CSS 画出小猫。

任务注意事项

注意浏览器中的兼容性

请注意代码风格的整齐、优雅

HTML 及 CSS 代码结构清晰、规范

代码中含有必要的注释

在线学习参考资料

我的代码


      
                      纯 CSS 实现猫笑起来的动画

总结一下：

①hover选择兄弟元素

/*鼠标hover样式 写在这里*/            .face:hover{
                    cursor: pointer;            }            .face:hover~.ear-wrap .left{
                    transform :rotate(-30deg);            }            .face:hover~.ear-wrap .right{
                    transform :rotate(30deg);            }            .face:hover .face-red{
                    opacity: 0.8;            }

②利用transform，transition等完成猫笑的效果

转载于:https://www.cnblogs.com/cndotabestdota/p/9092849.html

你可能感兴趣的文章