WEB前端教程：CSS transition 和 CSS transform 配合制作动画 - 好学星城学习论坛

page contents

WEB前端教程：CSS transition 和 CSS transform 配合制作动画

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

课程目标

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

阅读

编码

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

鼠标 hover 上去的时候，出现小猫笑起来的动画
transition 和 transform 各项子属性的值可以自定
对 CSS 布局比较感兴趣的同学，在学有余力的情况下，可以尝试自己用 CSS 画出小猫

要求

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-31 10:44
阅读 ( 303 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1478 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章