một ứng dụng đẹp phải cung cấp cho người dùng phản hồi trực quan. người dùng phải luôn biết rằng đơn đặt hàng (một lần nhấp, một lần nhấn hoặc bất kỳ thứ gì) được nhận và …

Bạn đang xem: tại sao bạn sử dụng chuyển tiếp css3


một ứng dụng đẹp

phải cung cấp cho người dùng
phản hồi trực quan. người dùng phải luôn biết rằng một đơn đặt hàng (một lần nhấp, một lần nhấn hoặc
bất cứ điều gì) được ứng dụng đón nhận và hiểu rõ và

hình ảnh động

là một công cụ tuyệt vời để làm như vậy.

cái mới

html 5

đặc điểm kỹ thuật (thành thật mà nói, tôi nên nói “cái mới

css 3

đặc điểm kỹ thuật ”) giới thiệu một công cụ tuyệt vời để xử lý

giản dị

hình ảnh động:

sự chuyển đổi

.

theo đặc điểm kỹ thuật “css transitions module cấp 3” trên

trang w3c

, chuyển tiếp css3

cho phép các thay đổi thuộc tính trong giá trị css xảy ra

thông suốt

trong một khoảng thời gian nhất định

.

mục đích của bài viết này trước tiên sẽ là mô tả khái niệm về
chuyển tiếp và sau đó để xem cách chuyển đổi css3 hoạt động và cách chúng tôi có thể
xử lý các trình duyệt không hỗ trợ tính năng:
html5 được hỗ trợ bằng css3 / styles

ngoài ra, tôi khuyên bạn nên đọc phần “


giới thiệu về hoạt ảnh css3


” (qua

david rousset

) là một người bạn đồng hành tuyệt vời cho bài viết này.

để xem cách chuyển đổi css3 có thể được sử dụng, tôi đã phát triển là một mẫu của một
trò chơi sử dụng chuyển tiếp css3 để làm sinh động các ô của một câu đố (và
sẽ dự phòng cho javascript nếu trình duyệt của bạn không hỗ trợ css3
chuyển tiếp):

để khởi chạy một trò chơi, chỉ cần nhấp vào “trộn nó!” và cố gắng giải quyết câu đố bằng cách nhấp vào các ô!

& amp; amp; lt; p & amp; amp; gt; trình duyệt của bạn không hỗ trợ iframe. & amp; amp; lt; / p & amp; amp; gt; nhấp vào đây để hiển thị bản trình diễn: & amp; amp; lt; a href = “http://www.catuhe.com/msdn/transitions/index.htm” & amp; amp; gt; http://www.catuhe.com /msdn/transitions/index.htm</a>

mã của trò chơi này có sẵn

nơi đây

.

Giới thiệu

lúc đầu, nhóm làm việc w3c css đã chống lại việc thêm các chuyển đổi
lập luận rằng quá trình chuyển đổi không thực sự là thuộc tính kiểu. nhưng
cuối cùng các nhà thiết kế và nhà phát triển đã thuyết phục được họ rằng
quá trình chuyển đổi là về kiểu động và có thể diễn ra trong tệp css.

theo trang web w3c, chuyển đổi css3 có thể tạo hoạt ảnh cho các loại thuộc tính sau: (

Click vào đây để hiển thị chúng

)

và các thuộc tính sau phải được hỗ trợ cho quá trình chuyển đổi 🙁

Click vào đây để hiển thị chúng

)

svg

các thuộc tính của đối tượng svg có thể hoạt hình khi chúng được định nghĩa là

hoạt hình: true

trong đặc tả svg:

http://www.w3.org/tr/svg/struct.html

.

tuyên bố

để khai báo quá trình chuyển đổi trong tệp css, bạn chỉ cần viết đoạn mã sau:

 chuyển tiếp-thuộc tính: tất cả;
    thời gian chuyển đổi: 0,5 giây;
    chuyển-thời-chức-năng: dễ dàng;
    độ trễ chuyển tiếp: 0s;

khai báo này xác định rằng bất kỳ cập nhật nào trên bất kỳ thuộc tính nào sẽ được thực hiện trong 0,5 giây (và không phải ngay lập tức

).

bạn cũng có thể xác định các bản dịch của mình trên cơ sở mỗi thuộc tính:

 transfer-property: độ mờ đục phía trên bên trái;
    thời gian chuyển đổi: 0,5 giây 0,8 giây 0,1 giây;
    chuyển tiếp-thời gian-chức năng: dễ dàng tuyến tính dễ dàng;
    độ trễ chuyển tiếp: 0s 0s 1s; 

và cuối cùng bạn có thể sử dụng thuộc tính tốc ký “

chuyển tiếp

”Để xác định tất cả những gì bạn cần trong một dòng:

 chuyển tiếp: hết 0,5 giây dễ dàng 0 giây; 

trong phiên bản viết tắt này, bạn có thể chính xác hóa bao nhiêu thuộc tính tùy thích, được phân tách bằng dấu phẩy:

 chuyển tiếp: độ mờ 0,5 giây dễ dàng 0 giây, trái 0,8 giây tuyến tính 0; 

các chuyển đổi sẽ được kích hoạt khi một thuộc tính của đối tượng đích được cập nhật. cập nhật có thể được thực hiện với

javascript

hoặc sử dụng css3 bằng cách gán

lớp mới cho một thẻ

.

ví dụ: sử dụng ie10 nếu bạn có khai báo css3 sau:

 -ms-transfer-property: opacity trên cùng bên trái;
    -ms-chuyển tiếp-thời lượng: 0,5 giây 0,8 giây 0,5 giây;
    -ms-chuyển đổi-thời gian-chức năng: dễ dàng tuyến tính dễ dàng; 

khi bạn cập nhật độ mờ của thẻ, giá trị hiện tại sẽ là
hoạt ảnh sang giá trị mới trong hơn 0,5 giây với chức năng định thời gian dễ dàng (mà
cho một hình ảnh động mượt mà).

Xem Thêm  Câu lệnh Java One Line if - một dòng if câu lệnh java

chuyển đổi phi tuyến tính

dòng “chuyển tiếp-thời gian-chức năng” xác định rằng quá trình chuyển đổi
sẽ không tuyến tính nhưng sẽ sử dụng hàm định thời để tạo ra

phi tuyến tính

hoạt hình.

về cơ bản, chuyển tiếp css3 sẽ sử dụng

đường cong bezier khối

để làm mượt quá trình chuyển đổi bằng cách tính toán tốc độ khác nhau trong suốt thời gian của nó.

các chức năng sau được hỗ trợ:

  • tuyến tính

    : tốc độ không đổi

  • khối-bezier

    : tốc độ sẽ được tính theo một khối
    đường cong bezier xác định bởi hai điểm kiểm soát: p0 et p1 (vì vậy bạn sẽ phải
    xác định 4 giá trị ở đây: p0x, p0y và p1x, p1y.

  • xoa dịu

    : tốc độ sẽ được tính bằng phương pháp lập phương (0,25, 0,1, 0,25, 1)

  • dễ dàng trong

    : tốc độ sẽ được tính bằng khối-bezier (0,42, 0, 1, 1)

  • dễ dàng inout

    : tốc độ sẽ được tính bằng khối-bezier (0,42, 0, 0,58, 1)

  • thoải mái

    : tốc độ sẽ được tính bằng khối-bezier (0, 0, 0,58, 1)

đây là một công cụ mô phỏng (sử dụng

svg

tất nhiên rồi

) để hiển thị tác động của từng chức năng thời gian:

& amp; amp; lt; p & amp; amp; gt; trình duyệt của bạn không hỗ trợ iframe. & amp; amp; lt; / p & amp; amp; gt; nhấp vào đây để hiển thị bản trình diễn: & amp; amp; lt; a href = “http://www.catuhe.com/msdn/transitions/easingfunctions.htm” & amp; amp; gt; http://www.catuhe.com /msdn/transitions/easingfunctions.htm</a>

trình mô phỏng này được viết bằng

javascript thuần túy

mã để tạo điều kiện dễ hiểu về chức năng:

    transitionshelper.computecubicbeziercurveinterpolation = function (t, x1, y1, x2, y2) {
        // giải nén x (bằng thời gian ở đây)
        var f0 = 1 - 3 * x2 + 3 * x1;
        var f1 = 3 * x2 - 6 * x1;
        var f2 = 3 * x1;
     
        var tinh chỉnh = t;
        for (var i = 0; i & lt; 5; i ++) {
            variledt2 = tinh chỉnh * tinh chế;
            varishedt3 = tinh tếp2 * tinh chế;
     
            var x = f0 * tinh chỉnht3 + f1 * tinh luyệnt2 + f2 * tinh luyện;
            var dốc = 1,0 / (3,0 * f0 * tinh t2 + 2,0 * f1 * tinh + f2);
            độ dốc tinh - = (x - t) *;
            tinh chỉnh = math.min (1, math.max (0, tinh chỉnh));
        }
     
        // giải quyết bezier khối cho x đã cho
        trả về 3 * math.pow (1 - tinh chỉnh, 2) * tinh luyện * y1 +
                3 * (1 - tinh chỉnh) * math.pow (tinh luyện, 2) * y2 +
                math.pow (tinh chỉnh, 3);
    };

mã này là việc triển khai bezier khối dựa trên

Định nghĩa

và bạn có thể tìm thấy nguồn của trình mô phỏng

nơi đây

.

sự chậm trễ

dòng “chuyển đổi-độ trễ” xác định độ trễ giữa cập nhật thuộc tính và bắt đầu quá trình chuyển đổi

sự kiện

một

Sự kiện

được nêu ra ở cuối quá trình chuyển đổi: “

chuyển tiếp

”. theo trình duyệt của bạn, tên chính xác sẽ là:

  • chrome & amp; cuộc đi săn:

    webkittransitionend

  • firefox:

    moztransitionend

  • opera:

    otransitionend

  • trình duyệt web IE:

    mstransitionend

sự kiện sẽ cung cấp cho bạn thông tin sau:

  • tên tài sản

    : tên của thuộc tính động

  • thời gian trôi qua

    : khoảng thời gian mà quá trình chuyển đổi đã chạy, tính bằng giây

đây là một mẫu sử dụng cho ie10:

 block.addeventlistener ("mstransitionend", ontransitionevent); 

thêm về chuyển đổi css3

Tôi chủ yếu có thể đề xuất hai lý do tại sao chuyển đổi css3 thực sự hữu ích:


  • tăng tốc phần cứng:

    chuyển đổi css3 là
    được xử lý trực tiếp trên gpu (nếu có) và sản xuất mượt mà hơn
    kết quả. và nó thực sự quan trọng trên các thiết bị di động, nơi máy tính
    sức mạnh thực sự có hạn

  • tách biệt tốt hơn giữa mã và thiết kế

    : cho tôi,
    nhà phát triển không được biết về hoạt ảnh hoặc bất kỳ thứ gì liên quan đến
    thiết kế. giống như cách mà nhà thiết kế / nghệ sĩ không được biết về
    javascript. đó là lý do tại sao quá trình chuyển đổi css3 thực sự thú vị như
    nhà thiết kế có thể mô tả tất cả các chuyển đổi trong css mà không cần
    các nhà phát triển

hỗ trợ và dự phòng

kể từ pp3,

tức là 10

(bạn có thể tải xuống với bản xem trước dành cho nhà phát triển windows “8”

nơi đây

) hỗ trợ chuyển tiếp css3:

báo cáo này được thực hiện bởi

http://caniuse.com/#search=css3 chuyển đổi

.

tất nhiên, vì thông số kỹ thuật chưa hoàn thành (

bản thảo làm việc

), bạn phải sử dụng các tiền tố của nhà cung cấp như –ms-, –moz-, –webkit-, –o-.

rõ ràng chúng ta có thể thấy rằng chúng ta cần cung cấp một

giải pháp trong suốt

để giải quyết tất cả các loại trình duyệt. cách tốt nhất sẽ là
phát triển một api có thể phát hiện sự hỗ trợ của quá trình chuyển đổi css3. nếu
trình duyệt không hỗ trợ tính năng này, chúng tôi sẽ dự phòng một số javascript
mã số.

điều quan trọng là phải hỗ trợ phương pháp dự phòng nếu bạn dựa vào
chuyển đổi cho các chức năng của trang web. nếu bạn không muốn làm điều đó,
bạn nên xem xét chỉ sử dụng chuyển tiếp để cải tiến thiết kế

.

trong trường hợp này, trang web sẽ vẫn hoạt động nhưng chỉ những trình duyệt được hỗ trợ mới mang lại trải nghiệm đầy đủ. chúng tôi nói ở đây về “

cải tiến tiến bộ

”Khi trình duyệt càng mạnh mẽ, anh ta càng nhận được nhiều tính năng.

vì vậy để có thể hỗ trợ dự phòng cho quá trình chuyển đổi css3, chúng tôi sẽ phát triển một bộ công cụ nhỏ để cung cấp quá trình chuyển đổi bằng mã.

trước hết, chúng tôi sẽ tạo một đối tượng vùng chứa cho không gian tên của chúng tôi:

 var transitionshelper = transitionshelper || {};
     
    transitionshelper.tickintervalid = 0;
     
    transitionshelper.easingfunctions = {
        tuyến tính: 0,
        dễ dàng: 1,
        easyin: 2,
        dễ dàng: 3,
        easyinout: 4,
        tùy chỉnh: 5
    };
     
    transitionshelper.currenttransitions = []; 

để hỗ trợ cùng một mức các hàm nới lỏng, chúng ta phải khai báo một “enum” với tất cả các trường bắt buộc.

bộ công cụ dựa trên một chức năng được gọi cứ sau 17ms (để
đạt được hình ảnh động ở tốc độ 60 khung hình / giây). hàm sẽ liệt kê thông qua một
tập hợp các chuyển đổi tích cực. cho mỗi lần chuyển đổi mã sẽ
đánh giá giá trị tiếp theo cho giá trị hiện tại và giá trị mục tiêu.

chúng tôi sẽ cần một số

tiện dụng

chức năng trích xuất giá trị của thuộc tính và đơn vị được sử dụng:

 transitionshelper.extractvalue = function (string) {
        thử {
            var result = parsefloat (string);
     
            if (isnan (kết quả)) {
                trả về 0;
            }
     
            trả về kết quả;
        } bắt (e) {
            trả về 0;
        }
    };
     
    transitionshelper.extractunit = function (string) {
     
        // nếu giá trị trống, chúng ta giả sử rằng nó là px
        if (string == "") {
            return "px";
        }
     
        var value = transitionshelper.extractvalue (string);
        var unit = string.replace (value, "");
     
        đơn vị trả hàng;
    }; 

hàm main sẽ xử lý các chuyển đổi đang hoạt động và sẽ gọi hàm bezier lập phương để đánh giá các giá trị hiện tại:

 transitionshelper.tick = function () {
        // xử lý chuyển tiếp
        for (var index = 0; index & lt; transitionshelper.currenttransitions.length; index ++) {
            var transfer = transitionshelper.currenttransitions [index];
     
            // tính giá trị mới
            var currentdate = (ngày mới) .gettime ();
            var diff = currentdate - transfer.startdate;
     
            var step = diff / transfer.duration;
            var offset = 1;
     
            // hàm định thời
            chuyển đổi (chuyển đổi.ease) {
                case transitionshelper.easingfunctions.linear:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, 0, 0, 1,0, 1,0);
                    phá vỡ;
                case transitionshelper.easingfunctions.ease:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, 0,25, 0,1, 0,25, 1,0);
                    phá vỡ;
                case transitionshelper.easingfunctions.easein:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, 0,42, 0, 1,0, 1,0);
                    phá vỡ;
                case transitionshelper.easingfunctions.easeout:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, 0, 0, 0,58, 1,0);
                    phá vỡ;
                case transitionshelper.easingfunctions.easeinout:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, 0,42, 0, 0,58, 1,0);
                    phá vỡ;
                case transitionshelper.easingfunctions.custom:
                    offset = transitionshelper.computecubicbeziercurveinterpolation (bước, chuyển tiếp.customeasep1x, chuyển tiếp.customeasep1y, chuyển tiếp.customeasep2x, chuyển tiếp.customeasep2y);
                    phá vỡ;
            }
     
            offset * = (transfer.finalvalue - giá trị chuyển đổi.originalvalue);
     
            var unit = transitionshelper.extractunit (transfer.target.style [transfer.property]);
            var currentvalue = transfer.originalvalue + offset;
     
            chuyển tiếp.currentdate = ngày hiện tại;
     
            // quá trình chuyển đổi chết?
            if (currentdate & gt; = transfer.startdate + transfer.duration) {
                currentvalue = transfer.finalvalue; // kẹp
                transitionshelper.currenttransitions.splice (chỉ mục, 1); // xóa quá trình chuyển đổi
                mục lục--;
     
                // sự kiện hoàn thành
                if (transfer.oncompletion) {
                    transfer.oncompletion ({propertyname: transfer.property, elapsedtime: transfer.duration});
                }
            }
     
            // ảnh hưởng đến nó
            chuyển đổi.target.style [chuyển đổi.property] = giá trị hiện tại + đơn vị;
        }
    }; 

phiên bản hiện tại của bộ công cụ chỉ hỗ trợ các giá trị số nhưng
nếu bạn muốn tạo hoạt ảnh cho các giá trị phức tạp (chẳng hạn như màu), bạn chỉ cần
phân rã chúng thành các giá trị đơn giản.

Việc đăng ký chuyển đổi trong hệ thống sẽ được thực hiện bằng mã sau:

 transitionshelper.transition = function (target, property, newvalue, time, easy, customeasep1x, customeasep1y, customeasep2x, customeasep2y, oncompletion) {
     
        // tạo một chuyển đổi mới
        var chuyển tiếp = {
            target: mục tiêu,
            property: tài sản,
            giá trị cuối cùng: giá trị mới,
            giá trị ban đầu: transitionshelper.extractvalue (target.style [thuộc tính]),
            thời lượng: thời lượng,
            ngày bắt đầu: (ngày mới) .gettime (),
            currentdate: (ngày mới) .gettime (),
            dễ dàng: dễ dàng,
            customeasep1x: customeasep1x,
            customeasep2x: customeasep2x,
            customeasep1y: customeasep1y,
            customeasep2y: customeasep2y,
            oncompletion: sự hoàn thành
        };
     
        // khởi chạy dịch vụ đánh dấu nếu được yêu cầu
        if (transitionshelper.tickintervalid == 0) {
            transitionshelper.tickintervalid = setinterval (transitionshelper.tick, 17);
        }
        
        // xóa các chuyển đổi trước đó trên cùng một thuộc tính và mục tiêu
        for (var index = 0; index & lt; transitionshelper.currenttransitions.length; index ++) {
            var temp = transitionshelper.currenttransitions [index];
     
            if (temp.target === transfer.target & amp; & amp; temp.property === transfer.property) {
                transitionshelper.currenttransitions.splice (chỉ mục, 1);
                mục lục--;
            }
        }
     
        // Đăng ký
        if (transfer.originalvalue! = transfer.finalvalue) {
            transitionshelper.currenttransitions.push (chuyển tiếp);
        }
    }; 

các ”

đánh dấu

”Chức năng được khởi chạy khi quá trình chuyển đổi đầu tiên được kích hoạt.

cuối cùng bạn chỉ cần sử dụng

hiện đại

để xác định xem chuyển tiếp css3 có được trình duyệt hiện tại hỗ trợ hay không. nếu không, bạn có thể

dự phòng

vào bộ công cụ của chúng tôi.

mã cho

người trợ giúp chuyển tiếp

có thể tải về tại đây:

http://www.catuhe.com/msdn/transitions/transitionshelper.js

ví dụ, trong trò chơi giải đố của tôi, đoạn mã sau được sử dụng để tạo hoạt ảnh cho các ô:

 if (! puzzle.istransitionssupported) {
        transitionshelper.transition (block.div, "top", block.x * totalsize + offset, 500, transitionshelper.easingfunctions.ease);
        transitionshelper.transition (block.div, "left", block.y * totalsize + offset, 500, transitionshelper.easingfunctions.ease);
    }
    khác {
        block.div.style.top = (block.x * totalsize + offset) + "px";
        block.div.style.left = (block.y * totalsize + offset) + "px";
    } 

chúng tôi có thể lưu ý rằng tôi có thể sử dụng

cách khác

làm hoạt hình
các ô của tôi khi chuyển tiếp css3 được hỗ trợ: tôi có thể đã xác định một
tập hợp các lớp css3 với các giá trị bên trái và trên cùng được xác định trước (một cho
mỗi ô) để ảnh hưởng chúng đến các ô bên phải.

một số khuôn khổ và bộ công cụ đã tồn tại để hỗ trợ chuyển đổi phần mềm:

nhân tiện, bạn cũng có thể sử dụng hàng cũ

hoạt hình ()

phương pháp jquery.

như chúng ta đã thấy, quá trình chuyển đổi css3 thực sự là

dễ

cách thêm hình ảnh động vào dự án của bạn. bạn có thể sản xuất nhiều hơn

hồi đáp nhanh

ứng dụng chỉ bằng cách sử dụng một số chuyển đổi khi bạn muốn thay đổi giá trị.

Nhân tiện, có hai giải pháp nếu bạn muốn triển khai dự phòng javascript:

  • bạn có thể làm

    tất cả các

    về phía javascript và nếu bạn phát hiện sự hỗ trợ của các chuyển đổi css3, bạn sẽ đưa các khai báo css3 vào trang.
  • hoặc bạn có thể sử dụng cách tiêu chuẩn (sử dụng khai báo css3 true trong css
    ) và chỉ cần phát hiện nhu cầu dự phòng trong javascript. đối với tôi, nó
    là lựa chọn tốt hơn vì dự phòng phải là một lựa chọn chứ không phải là chính
    môn học. trong tương lai gần, tất cả các trình duyệt sẽ hỗ trợ chuyển đổi css3
    và trong trường hợp này, bạn sẽ chỉ phải xóa mã dự phòng của mình.
    hơn nữa, đó là một cách tốt hơn để để tất cả css dưới sự kiểm soát của
    các

    sáng tạo

    đội chứ không phải ở phần mã.
  • blog về hoạt ảnh css3 của david rousset:

    http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx
  • thông số kỹ thuật chuyển tiếp css3:

    http://www.w3.org/tr/css3-transitions/
  • tức là lái thử trên chuyển tiếp css3:

    http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_transitions.htm
  • những bài viết hữu ích khác:


Xem thêm những thông tin liên quan đến chủ đề tại sao bạn sử dụng chuyển tiếp css3

Cách thiết lập môi trường code HTML, CSS / SASS, JS tối ưu, chuyên nghiệp

alt

  • Tác giả: Ta Chi Bao
  • Ngày đăng: 2021-04-03
  • Đánh giá: 4 ⭐ ( 2633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách thiết lập môi trường code HTML, CSS / SASS, JS tối ưu, chuyên nghiệp
    http://tachibao.github.io/
    + Link download phần mềm: https://code.visualstudio.com/
    + Giới thiệu đến các bạn khoá học html, css / sass, javascript, figma, php + mysqli chất lượng cao
    https://youtu.be/UvUt9SmJNuA

Một vài tính năng tuyệt vời của CSS3 mà có thể bạn chưa biết?

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 8145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chào các bạn, chắc hẳn các bạn đều biết đến CSS và từng tiếp xúc, làm việc với CSS3. Một FrontEnd nếu sử dụng thành thạo CSS3 hầu như có thể làm được những hiệu ứng từ đơn giản đến phức tạp trên websi…

Tạo hiệu ứng cho trang web với CSS3 background & transition

  • Tác giả: ntuts.com
  • Đánh giá: 3 ⭐ ( 1272 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hoạt hình chuyển tiếp css3 khi tải?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2447 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể chạy hoạt hình CSS khi tải trang mà không cần sử dụng bất…

Chuyển tiếp CSS3: Hướng dẫn nhỏ

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8930 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ” Chuyển đổi ” chỉ sự thay đổi trạng thái của một đối tượng. Trong CSS3, chúng ta có thể hiển thị quá trình chuyển đổi của một đối tượng bằng cách sử dụng thuộc tính chuyển đổi. Biến thể của…

12 hiệu ứng chuyển động CSS3 miễn phí tốt nhất cho website

  • Tác giả: www.ngoisaoso.vn
  • Đánh giá: 3 ⭐ ( 1849 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, Ngôi Sao Sốs sẽ chia sẻ miễn phí các hiệu ứng chuyển động css3 tốt nhất để bạn có thể làm động nội dung cho việc thiết kế website của mình….

Cách sử dụng Chuyển tiếp & Ảnh động CSS3 để làm nổi bật các thay đổi giao diện người dùng / UI / UX

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 5 ⭐ ( 9436 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các nhà thiết kế và nghệ sĩ có một lịch sử lâu dài thử nghiệm chuyển động, hiệu ứng và các loại ảo ảnh khác nhau với mục đích thêm một lớp bổ sung vào

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Bảng tóm tắt môn học - hằng số euler

By ads_php