Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design Web Design CSS

CSS3 與 JQuery 動態效果應用

為網頁加上一些豐富的動態效果
Rating: 0.0 out of 50.0 (0 ratings)
3 students
Created by 景文 鄭
Published 11/2019
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 如何在網頁上加入互動效果
  • 數十個動態效果範例應用
  • FLEX排版實務
  • 整合別人寫好的第三方動畫插件,並套用在自己的網頁上

Requirements

  • 已經有 HTML&CSS 基礎者
  • 想進一步瞭解 CSS3 動態效果
  • 想進一步瞭解 JQ 應用及動態效果

Description

學會了單一CSS效果之外,您該會的,是如何整合並且做出完整的範例。

本課程除了介紹CSS 3 的新增屬性、動態特效之外,在網頁設計上,您絕對不能漏掉 JQUERY 的重要性,本課程將帶您認識何謂 JQUERY 、如何使用它、以及網路上的一些相關的套件如何使用,利用這樣的邏輯跟技巧,您日後要使用某些動態效果時,也可以直接在GOOGLE搜尋效果,並且直接套用。

給您一條魚吃,不如帶您學會如何釣魚。

Who this course is for:

  • 想提升網頁學習效率者
  • SOHO 族
  • 網頁設計師進修

Course content

6 sections • 64 lectures • 11h 21m total length

  • Preview09:22
  • Preview07:25
  • Preview12:26
  • Preview10:46
  • Preview12:38
  • Preview10:34
  • Preview08:59
  • 影格動畫應用
    11:24
  • Preview12:02
  • Preview11:25
  • Preview13:51
  • 圓形圖像的RWD設定
    07:32
  • Preview09:13
  • Preview07:41

  • Preview10:17
  • Preview14:42
  • Preview14:25
  • 進階動態選單效果設計
    11:52
  • 利用偽元素設計文字滑入效果
    07:52
  • Preview14:22
  • 進階模糊縮放滑入選單效果
    08:32
  • CSS Sprite圖示動態選單
    12:56
  • 動態滑動廣告版塊
    09:44
  • 720度進階3D旋轉效果
    09:07
  • 3D翻轉動態特效
    16:40
  • 全螢幕背景
    12:39
  • 進階商品滑入動態效果
    13:16
  • 登入表單介面設計
    21:50
  • 透明表單介面設計
    11:23
  • 雙欄社群登入表單
    18:52
  • 動態波浪效果
    05:54
  • 進階按鈕滑入animation效果
    08:55
  • 進階動態切換表單設計
    07:32
  • 利用CSS完成Mac的Dock效果
    14:33
  • 游標移入卡片式動態效果
    16:33
  • 大圖輪播延伸效果設計
    07:07
  • 前後卡片切換效果
    12:38

  • Flexbox排版基礎1
    14:28
  • Flexbox排版基礎2
    12:52
  • Flexbox實作:nav導覽列製作
    08:50
  • Flexbox實作:流動版型製作
    11:31
  • Flexbox RWD網頁實作1
    12:57
  • Flexbox RWD網頁實作2
    12:01
  • Flexbox RWD網頁實作3
    05:46

  • JQUERY介紹與事件處理
    12:38
  • 使用JQUERY處理CSS樣式
    14:48
  • 利用JQ完成Mac的Dock效果
    05:32
  • 手機版的漢堡選單製作 I
    11:33
  • 手機版的漢堡選單製作 II
    08:32
  • 左側動態滑出選單
    10:40
  • Parallax Scrolling滾動視差效果
    07:09
  • 縮放背景的滾動視差
    08:09

  • lazy load延遲載入
    07:00
  • slick多媒體輪撥外掛套件
    09:10
  • leroy-zoom局部放大鏡效果
    05:45
  • LightGallery相片館
    07:53
  • 3D卡片輪播效果
    08:06
  • Owl Carousel 2輪播外掛
    05:29
  • SliceBox的3D翻轉輪播效果
    05:49
  • 瀑布流版面設計
    04:34

  • 作品集網站設計1
    11:39
  • 作品集網站設計2
    11:58
  • 作品集網站設計3
    10:09
  • 作品集網站設計4
    10:01

Instructor

景文 鄭
平面網頁專職設計師
景文 鄭
  • 4.3 Instructor Rating
  • 9 Reviews
  • 142 Students
  • 5 Courses

**經歷

創意家數位出版:腳本企劃、排版人員

千華數位文化出版:編輯、多媒體、排版人員

電腦書出版:企劃編輯、作者、as3.0程式範例

元智大學:Office進修課程講師

文化大學廣告社:AI課程講師

傑森多媒體:Flash as3.0動畫程式設計

GoStyle:Q版人像插畫師

聯成電腦:Office、Adobe、RWD網頁設計講師

華山開心教室:電腦課程講師

復興設計學院:網頁&動畫設計專任講師

聖馬丁設計學苑:平面&網頁設計專職講師

**現任

巨匠電腦:平面設計課程講師

莊敬高職:兼任網頁課程講師

專職 SOHO 族


  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.