Hiệu ứng Zoom ảnh Với CSS3 - IIS Windows Server

Trang chủ » Hiệu ứng Zoom ảnh Css3 » Hiệu ứng Zoom ảnh Với CSS3 - IIS Windows Server

Có thể bạn quan tâm

Không có bình luận nào trên trang cá nhân. Xem bình luận trên trang cá nhân >> Không có tin nhắn mới. Xem tin nhắn >> Email : Mật khẩu : Ghi nhớ? Quên MK Login với
  • Tài khoản của bạn
  • Chỉnh sửa thông tin
  • Thay đổi mật khẩu
  • Quản lý Bài Công nghệ
  • Quản lý Bài Tin Tức
  • Thoát

Điểm nhấn

  • Hướng dẫn bật chế độ chạy GPU thay CPU
  • Lỗi HTTP Error 500.35 - ASP.NET Core does not support multiple apps in the same app pool
  • Lỗi triển khai ASP.NET Core lên IIS
  • C.O.R.S hoạt động như thế nào?
  • Hướng dẫn xây dựng ứng dụng gửi mail sử dụng công nghệ ReactJS và NodeJS
  • Phân biệt webhook và polling
Đóng góp
  • Viết bài Công nghệ
  • Viết bài Tin tức
  • Gửi Sách
  • Gửi Phần mềm
  • Gửi Mail
Liên hệ
  •  
  • DOTNET Windows Form WPF Console ASP.NET ASP.NET MVC 2 ASP.NET AJAX Class Library Silverlight WCF DotNetNuke Crystal Report SharePoint LightSwitch .NET Framework .NET Base Class Library Regular Expressions XML Chart Controls Azure LINQ to SQL Microsoft Office Office Live Development Team Foundation Server Maps ADO Control Tips Config Facebook Apps Visual Studio Windows Phone React Native API & OData Xem tất cả
  • JAVA Applet Swing/JFC/AWT/SWT Network J2ME J2SE J2EE Web Service và XML Portal Android Other C/C++ IOS
  • PHP VBB JOOMLA WDPRESS DRUPAL NUKEVIET ZEND CAKE PHP MVC MAGENTO LINUX WEBSERVER OTHER Moodle
  • DATABASE MySQL Tip SQL Server Guide
  • ĐÀO TẠO Compare Guide Introduction Install SEO Project GRAPHICS MMO IoT Python Linux Photoshop ReactJS
  • SÁCH
  • PHẦN MỀM
  • TIN TỨC
  • SEO Learning SEO SEO On-Page Thủ thuật SEO Phần mềm SEO Thuật ngữ
  • TIẾNG ANH

Thủ thuật

  • Hướng dẫn chi tiết cách viết báo cáo môn học
  • Khắc phục lỗi "MICROSOFT ACE.OLEDB.12.0…" khi import tệp tin Excel xlsx lên hệ thống
  • Hướng dẫn đẩy Code từ Netbean lên Github
  • Trang chủ
  • HTML
Cấp bậc tác giả:

HTML

 Hiệu ứng zoom ảnh với CSS3 Được viết bởi webmaster vào ngày 18/10/2014 lúc 10:26 PM Trong bài viết này tôi sẽ thảo luận ví dụ về hiệu ứng zoom ảnh sử dụng thuộc tính transform và transition của CSS3. Zoom có ​​nghĩa là làm cho kích thước của phần tử lớn hơn hoặc nhỏ hơn so với kích thước hiện tại của nó.
  • 0
  • 16984

Hiệu ứng zoom ảnh với CSS3

Có ba ví dụ zoom như sau:1. Phóng to sử dụng transform: scale(2); và transition: all .3s ease-out;2. Phóng to sử dụng hai ảnh. Ảnh thứ hai sẽ được hiển thị khi di chuột chỉ bên phải của hình ảnh hiện tại mà không ảnh hưởng bất kỳ yếu tố trên trang. 3. Phóng to sử dụng hai ảnh. Ảnh thứ hai sẽ được hiển thị khi di chuột tại điểm liên quan đến vị trí hiện tại bằng cách sử dụng transform: translate (0,200px); mà không ảnh hưởng bất kỳ yếu tố trên trang.Ví dụ 1 Tôi đang sử dụng 8 ảnh Rangoli để hiển thị các hiệu ứng zoom.1. transition: all .3s ease-out: thuộc tính transition có giá trị sau. transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; a. transition-property: b. transition-duration: Quyết định bao nhiêu lâu sẽ mất để hoàn thành transition. c. transition-timing-function: thuộc tính này được dùng để xác định tốc độ thay đổi của transition trong thời gian đó.=> linear sẽ duy trì tốc độ như nhau trong suốt quá trình chuyển đổi. => ease-in sẽ bắt đầu các ảnh động từ từ và kết thúc ở tốc độ cao. => ease-out sẽ bắt đầu các ảnh động ở tốc độ cao, sau đó kết thúc từ từ. => ease-in-out sẽ bắt đầu từ từ, nhanh nhất ở giữa các ảnh động, sau đó kết thúc từ từ. => ease giống ease-in-out, ngoại trừ nó bắt đầu nhanh hơn một chút so với khi nó kết thúc. d. transition-delay: Nó chịu trách nhiệm thời gian bị delay từ khi transition được kích hoạt. 2. transform: scale(2): Phương thức scale tăng hoặc giảm kích thước của các phần tử. Nếu chúng ta cung cấp hai giá trị (x, y) chúng sẽ kéo dài các yếu tố theo chiều ngang và theo chiều dọc. Code 1:<!DOCTYPE HTML> <html> <head> <style type="text/css"> div{ padding:20%; float: left; } .rangoliPic { width: 200px; height:200px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rangoliPic:hover { -moz-transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } </style> </head> <body> <div> <img class="rangoliPic" src="Images/rangoli1.jpg" /> <img class="rangoliPic" src="Images/rangoli2.jpg" /> <img class="rangoliPic" src="Images/rangoli3.jpg" /> <img class="rangoliPic" src="Images/rangoli4.jpg" /> <img class="rangoliPic" src="Images/rangoli5.jpg" /> <img class="rangoliPic" src="Images/rangoli6.jpg" /> <img class="rangoliPic" src="Images/rangoli7.jpg" /> <img class="rangoliPic" src="Images/rangoli8.jpg" /> </div> </body> </html> Kết quả: Ví dụ 2:Tôi đang sử dụng những ảnh tương tự trong ví dụ này. Nhưng sử dụng lại hai ảnh. Ví dụ này sẽ rất hữu ích khi chúng ta muốn hiển thị ảnh ở chỉ vị trí phía bên phải của hình ảnh. Các điểm cần lưu ý như sau.1. position:absolute: Được áp dụng cho ảnh thứ hai để khi hình ảnh thứ hai được hiển thị trong trình duyệt với kết quả của di chuột, nó sẽ không làm xáo trộn các yếu tố khác của trang.2. width: 0px: Để ẩn ảnh thứ hai. 3. transition: width 0.3s linear 0s: Tôi đã thảo luận trong ví dụ 1Code 2:<!DOCTYPE HTML> <html> <head> <style type="text/css"> div{ padding:15%; float: left; } .rangoliPic{ width: 200px; height:200px; } .rangoliPicBig{ position:absolute; width: 0px; transition: width 0.3s linear 0s; z-index: 10; } .rangoliPic:hover + .rangoliPicBig{ width:400px; height:400px; } </style> </head> <body> <div> <img class="rangoliPic" src="Images/rangoli1.jpg" /> <img class="rangoliPicBig" src="Images/rangoli1.jpg" /> <img class="rangoliPic" src="Images/rangoli2.jpg" /> <img class="rangoliPicBig" src="Images/rangoli2.jpg" /> <img class="rangoliPic" src="Images/rangoli3.jpg" /> <img class="rangoliPicBig" src="Images/rangoli3.jpg" /> <img class="rangoliPic" src="Images/rangoli4.jpg" /> <img class="rangoliPicBig" src="Images/rangoli4.jpg" /> <img class="rangoliPic" src="Images/rangoli5.jpg" /> <img class="rangoliPicBig" src="Images/rangoli5.jpg" /> <img class="rangoliPic" src="Images/rangoli6.jpg" /> <img class="rangoliPicBig" src="Images/rangoli6.jpg" /> <img class="rangoliPic" src="Images/rangoli7.jpg" /> <img class="rangoliPicBig" src="Images/rangoli7.jpg" /> <img class="rangoliPic" src="Images/rangoli8.jpg" /> <img class="rangoliPicBig" src="Images/rangoli8.jpg" /> </div> </body> </html> Kết quả: Ví dụ 3Ví dụ này cũng giống như Ví dụ 2. Sự khác biệt duy nhất là vị trí kết quả hình ảnh là khác nhau. Nếu chúng ta muốn thể hiện hình ảnh kết quả tại postion khác: transform: translate(0,200px);: Dịch chuyển các phần tử từ vị trí hiện tại của nó. Code 3.rangoliPic:hover + .rangoliPicBig{ width:400px; height:400px; transform: translate(0,200px); }

Nguồn bài viết: DOTNET.VN

  • Bài trướcHiển thị danh sách tập tin trong thư mục hiện hành
  • Bài sauLỗi HRESULT: 0x89721800 khi triển khai Windows Phone trong Visual Studio

Bài viết tương tự

  • Một số Slide hình ảnh tin tức tuyệt vời dành cho Web
  • Hiển thị tất cả cookie sử dụng Javascript
  • Responsive Navigation Menu sử dụng Twitter Bootstrap 3.0
  • [HTML5]Web Form 2.0
  • [HTML5]Sự kiện
  • [HTML5]Thuộc tính
  • [HTML5]Cú pháp
  • [HTML5]Tổng quan
  • jQuery Selector Tester và Cheat Sheet
  • Làm thế nào để thiết lập bộ đếm thời gian trong javascript?
BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

  • Xây dựng hệ thống xác thực bảo mật với JWT và Refresh Token trong ASP.NET Core Làm sao để chỉ cho phép một số role truy cập truy vấn $expand=SensitiveData? Hướng dẫn bật chế độ chạy GPU thay CPU Lỗi HTTP Error 500.35 - ASP.NET Core does not support multiple apps in the same app pool Lỗi triển khai ASP.NET Core lên IIS C.O.R.S hoạt động như thế nào? Hướng dẫn xây dựng ứng dụng gửi mail sử dụng công nghệ ReactJS và NodeJS Phân biệt webhook và polling Lỗi https khi thực hiện project oData Hướng dẫn tạo Map API cho Android trong google
Xem tất cả

LIKE BOX

Bài viết được xem nhiều nhất

  • [TUT]Xây dựng Website Bán Hàng - Hướng dẫn tạo DataBase (96050) LẤY LẠI MẬT KHẨU SA TRONG SQL SERVER 2005 2008 (92835) Một số bài tập mẫu SQL(Phân I) (90978) CSS cho các thẻ theo trạng thái (link, hover, visited, active, focus) (84676) Các kiểu dữ liệu SQL (75628) Chuyển đổi giữa các hệ cơ số (75345) Kiểu dữ liệu Array và List trong C# (69987) Xây dựng Lớp Phân Số. Tính toán Cộng, trừ, nhân, chia (62925) Hướng dẫn khắc phục lỗi không tạo được Diagrams(sơ đồ quan hệ) trong SQL 2005/2008 (56358) [Java] Kết nối CSDL từ NetBean (43972)
Xem tất cả

HỌC HTML

  • 1 Hướng dẫn cách hiển thị hình ảnh cần chọn khi share link trên mạng xã hội
  • 2 Hướng dẫn truy cập webcam và chụp hình bằng Javascript
  • 3 Làm thế nào Hover với Bootstrap Dropdown
  • 4 Tìm hiểu về cách hoạt động của Bootstrap Grid 4
  • 5 Hướng dẫn xây dựng đồng hồ bấm giờ bằng JavaScript
  • 6 Hướng dẫn sử dụng CSS Flexbox - Phần 2
  • 7 Hướng dẫn sử dụng CSS Flexbox - Phần 1
  • 8 Cài đặt CLI cho môi trường vue chuyên nghiệp hơn
  • 9 Cài đặt Vue thông quan NPM
  • 10 Dùng cặp thẻ script trực tiếp để sử dụng thư viện Vue.js
Xem tất cả

Học Hệ thống Mạng

  • Hướng dẫn Cấu hình DHCP và Routing Remote Access
  • Hướng dẫn tạo Organizational Unit - Domain Group & User - Join Domain
  • Nghẽn băng thông mạng LAN
  • Cisco Meraki - Kiến trúc hạ tầng mạng tiên tiến có một không hai
  • Hướng dẫn chia sẻ dữ liệu giữa máy thật và máy ảo trên VirtualBox
  • Hướng dẫn cách copy và paste giữa máy thật và máy ảo trên VirtualBox
  • Phần mềm tạo máy ảo miễn phí và tốt nhất hiện nay
  • Lỗi Hyper-V khi cài đặt VMware Workstation trên Windows 8
  • Khoá không cho Người dùng thay đổi địa chỉ IP
  • VMWARE báo 'VmWare remote file system 2gb limit'
Xem tất cả Đối tác:
  • DotNet Group - Chia sẻ & Kết nối
  • Bảo hành Electrolux
  • Dạy lái xe Ninh Bình
  • Công ty Điện Lạnh Đà Nẵng
Thiết kế bởi DOTNET GROUP.  Hoàn thành giai đoạn I

  • DotNet Group - Chia sẻ & Kết nối

  • LIÊN LẠC
  • CHÍNH SÁCH BẢO MẬT
  • QUY ĐỊNH & ĐIỀU KHOẢN
  • SITEMAP
  • GIỚI THIỆU
  • facebook
  • twitter
  • google
  • media

©2015 DOTNET GROUP. All contents are copyright of their authors.

  • Chinh sách bảo mật
  • Quy định & Điều khoản
  • Giới thiệu

©2023 DOTNET GROUP. All contents are copyright of their authors.

Từ khóa » Hiệu ứng Zoom ảnh Css3