Video tutorial on achieving smooth transition effect on web pages using css3-Free online video tutorial-php.cn

Community

Learn

Tools Library

AI Tools

Leisure

English

Video tutorial on achieving smooth transition effect on web pages using css3

Without any JavaScript scripts, use pure CSS to achieve smooth transitions between pages and experience the magical experience brought by transform, transition, and animation.

Intermediate

css3

smooth transition

Web page

36649 person learning

16class hour

02 hours 04 minutes 27 secondsTotal course duration

2022-04-18update

黄舟

Gold lecturer

A total of 59 courses Student85107 Lecturer rating5.5

人生最曼妙的风景，竟是内心的淡定与从容！More>>

Course Introduction Course Outline Other Courses

You will learn：

1. How to analyze animation effects 2. How to use @font-face to introduce custom fonts 3. How to use transform to achieve translation and rotation 4. How to use transition to implement transition animation 5. How to use animation and keyframes to define animations

Video tutorial on achieving smooth transition effect on web pages using css3

Chapter1 Navigation production
expand retract

Section1 Effect demonstration
duration： 01 minutes 36 seconds

Section2 Page structure writing
duration： 04 minutes 01 seconds

Section3 Use radio to create navigation (html structure construction)
duration： 07 minutes 38 seconds

Section4 Use radio to make navigation (add style)
duration： 13 minutes 25 seconds

Section5 Use radio to create navigation (current navigation style settings)
duration： 05 minutes 52 seconds

Section6 Navigation triangle production
duration： 07 minutes 32 seconds
Chapter2 Navigation page animation production
expand retract

Section1 Navigation page switching (1)
duration： 05 minutes 21 seconds

Section2 Navigation page switching (2)
duration： 08 minutes 29 seconds

Section3 Navigation page switching (3)
duration： 09 minutes 05 seconds

Section4 Navigation page back animation production (icon triangle background production)
duration： 04 minutes 43 seconds

Section5 Navigation page back animation production (@font-face implements small icon)
duration： 14 minutes 15 seconds

Section6 Navigation page back animation production (difference between animation and transition)
duration： 12 minutes 17 seconds

Section7 Navigation page back animation production (animation production animation)
duration： 11 minutes 09 seconds
Chapter3 Detailed optimization and summary
expand retract

Section1 Details
duration： 04 minutes 55 seconds

Section2 adaptive processing
duration： 12 minutes 20 seconds

Section3 Summarize
duration： 01 minutes 49 seconds

黄舟 Lecturer Other Courses

ElementaryQianfeng PHP-HTML entry and practical video tutorial

31977
Collection
ElementaryChuanzhi Podcast HTML series video tutorials

31076
Collection
ElementaryQianfeng PHP-CSS introduction and application video tutorial

33769
Collection
ElementaryCSS in-depth video tutorial

96800
Collection
IntermediateVideo tutorial on achieving smooth transition effect on web pages using css3

36649
Collection
IntermediateCSS Meilan Mall web design project video tutorial

52840
Collection
ElementaryQianfeng HTML5 tutorial part two: micro case explanation video tutorial

69316
Collection
ElementaryHTML5 basic knowledge introductory video tutorial

74366
Collection
IntermediateHTML5 plus Runtime video tutorial for developing APP to call native components

32434
Collection
IntermediateH5 game practice: if you are a man, go to the 100th floor video tutorial

35732
Collection
IntermediateBackend.com HTML5 video tutorial

82004
Collection
ElementaryHTML5+CSS3 quick start video tutorial

145043
Collection

Start Learning

This course includes：

02 hours 04 minutes 27 seconds Watch videos anytime

0 Download Resources

Popular courses Latest courses

More>