|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/2d-animation-with-css-animations-complete-course-project/
课程评论:没有评论
课程名称:使用CSS动画的2D动画 - 完整课程与项目 课程概述: 当提到2D动画,尤其是网页动画时,很多人可能会想到复杂的JavaScript代码、Flash或其他难以学习的专有软件。但现在,一切都变得简单了!过去需要花费数天或数月来掌握复杂软件或学习大量语法才能创建出色的网页动画的日子已经过去。CSS3及其动画的推出,使学习过程变得更为简单。如果你了解HTML和CSS的基础,便能轻松上手。通过几小时的学习,你将掌握CSS3动画语法,快速创建出引人注目的网页特效和关键帧动画,任何人都可以成为网页动画师。 学习内容: 1. 操作网站的每个元素,包括形状、大小、位置和角度的改变。 2. 为网页创建流畅的动画和过渡效果,如旋转按钮、自动变色和变大小的框等。 3. 创建每一个动画效果的逐帧动画,如沿特定路径移动的球及多色变化的汽车。 4. 控制动画的时机、延迟、重复次数(甚至无限)、赋予多个状态和自定义速度等。 应用领域: 1. 如果你是自由网页开发者/设计师,可以通过为客户提供动画按钮、颜色变化文本等酷炫特效来吸引他们。 2. 创建动画场景,如移动的球和交通繁忙的场景,通过学习关键帧动画实现。 3. 通过创建在角色和游戏环境中的棒棒过渡和关键帧动画,使网页游戏更具互动性和趣味性。 课程设计: 本课程分为三个模块,每个模块深入讲解CSS动画的概念,配有丰富的示例。 - 模块1:变换 - 学习如何在网页上操作元素,包括移动、旋转、调整大小等。 - 模块2:过渡动画 - 学习如何平滑地从一种状态过渡到另一种状态,定制过渡效果。 - 模块3:关键帧动画 - 创建呈现每个动画的帧,实现真实的2D动画效果。 示例与项目: 1. 旋转、变色并在鼠标悬停时增减大小的按钮(过渡模块)。 2. 在动画期间宽高变化并切换多种颜色的彩色盒子(关键帧模块)。 3. 沿特定路径移动并在悬停或点击时停止的动画小球(关键帧模块)。 选择本课程的理由: 1. 课程彻底,提供所有创建2D动画所需的知识。 2. 鼓励“边做边学”的学习方式,充实的示例确保概念清晰。 3. 跟随课程示例,能够自信地进入2D网页动画的世界,丰富简历技能。 4. 通过趣味项目保持学习的乐趣,运用所学概念。 别再犹豫了,立即报名,探索精彩的CSS动画世界!
When you hear the term 2D Animation, especially web animations, you probably imagine complicated Javascript codes, Flash or other hard-to-learn proprietary software programs. That's how it was until a few years ago. You had to spend days, or months mastering complicated software or learning a lot of syntax until you could create decent web animations. But no more! CSS3, and along with it, CSS Animations were released a few years ago, and they've have made your learning process MUCH easier. If you know the very basics of HTML and CSS, which anyone who has anything to do with coding/web design does, you're all set. Spend a few hours learning a bunch of CSS3 Animation syntaxes, and you'll be creating awesome web effects and keyframe animations in no time at all! Anyone can become a web animator now. What will you learn in our course? 1. How to manipulate every single web element of your website - change it's shape, size, position, angle and so much more. 2. How to create slick animations and transition effects for your web pages - rotating buttons, boxes that automatically change color and size, web elements that move around the web page based on the conditions you give, etc etc. 3. How to create frame by frame of every single animation effect you want - a ball that moves around your given path, multiple color changes within a specific moving cars, 4. How to time your animations, delay them, repeat them a certain number of times (even infinite), give multiple states to them, give them custom speeds, etc. and so much more! Where can you apply what you learn from our course? 1. If you're a freelance web developer/designer, dazzle your clients with animated poups, animated buttons, color changing text and a lot more cool effects like these on your web apps and web pages. 2. Do you want to create animated scenes? Moving balls, bouncing balls, a scene that depicts a trafficked road...you can do all of that and more by learning how to work with keyframe animations in CSS. 3. Make your web games more interactive and fun to play by creating awesome transitions and keyframe animations on your characters and game environment. As I said, sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere. Your imagination is your only obstacle to how you can animate your web elements with what you learn here. How is this course designed? Our course has 3 modules, where each module will thoroughly explain the intricacies of one of the concepts in CSS Animations with a wealth of over-the-shoulder examples. Here are the modules: Module 1 - Transformations - This is the foundations module. You'll learn how to manipulate your web elements in this module. You'll learn how to move the elements around the web page, rotate them to any angle you want, resize them, skew them and so much more. Module 2 - Transition animations - You'll learn how to smoothly transition an element from one state to another in here, so it looks like an animation. Change it's colors, size, position, stylings and so much more based on the conditions you give. You'll also learn to customize the transition animations by delaying them, changing the speed of the animation, changing the duration of the animation and so much more. Module 3 - Keyframe animations - A bigger and more important concept. In here, you'll learn how to create frames that depict every single animation you want applied to your web elements. In the duration of the animation, you'll be able to perform multiple changes to your element (multiple style changes, position changes etc). Learn how to give the illusion of movement to create high class animated scenes. Learn how to create real world 2D animation effects by using the various properties and features available in keyframe animations. We also cover a lot of examples and projects, like: 1. Animated button that rotates, changes between 2 colors and increases or decreases when hovered on (Transition module). 2. Animated colored box that alternates between different widths and heights and changes between 4-5 colors in the duration of the animation (Keyframe module). 3. Moving ball animation mini project - A ball that moves along the inner edges of the ball repeatedly while changing colors, and stops when hovered or clicked on (keyframe module). Why should you choose our course? 1. We like to be thorough in our teaching. You'll find everything you need to start creating awesome 2D animations in this course. You won't have to look anywhere else. 2. We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly. 3. If you follow along with our examples in our over-the-shoulder trainings, and create the effects along with us, you'll be confident in embarking on the world of 2D web animations by the time you finish our course. You'll be able to confidently add this as a skill in your resume. 4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You'll learn how to apply the concepts you learn in the course in these mini projects and examples. So, what are you waiting for? Enroll now and embark into the wonderful world of CSS aimations.