2017-04-02 44 views
1

如何使用@keyframes來縮放轉換(放大)HTML <body></body>標記中的所有內容?@Keyframes to scale轉換網站主體

有沒有辦法使用Keyframes而不是我的body:hover的臨時解決方案?


隨着網頁首次加載,應該在1.5s的時間內縮放1.01。

body { 
    transition: all 1.5s ease-in-out; 
    transform: scale(1.00); 

}

body:hover { 
    transition: all 1.5s ease-in-out; 
    transform: scale(1.01); 
} 

回答

1

用css動畫這樣

@keyframes anime { 
 
    0% { 
 
    transform: scale(1.00); 
 
    } 
 
    100% { 
 
    transform: scale(1.01); 
 
    } 
 
} 
 

 
@-webkit-keyframes anime { 
 
    0% { 
 
    transform: scale(1.00); 
 
    } 
 
    100% { 
 
    transform: scale(1.01); 
 
    } 
 
} 
 

 
@-moz-keyframes anime { 
 
    0% { 
 
    transform: scale(1.00); 
 
    } 
 
    100% { 
 
    transform: scale(1.01); 
 
    } 
 
} 
 

 
@-o-keyframes anime { 
 
    0% { 
 
    transform: scale(1.00); 
 
    } 
 
    100% { 
 
    transform: scale(1.01); 
 
    } 
 
} 
 

 
body { 
 
    transition: all 1.5s ease-in-out; 
 
    /*  transform: scale(1.00); */ 
 
    border: solid red; 
 
    animation-name: anime; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
}
<div> 
 
    The earliest computers dealt with numeric data only, and made no provision for character data. Six-bit BCD was used by IBM on early computers such as the IBM 704 in 1954.[1]:p.35 This encoding was replaced by the 8-bit EBCDIC code when System/360 standardized 
 
    on 8-bit bytes. There are some variants of this type of code (see below). Six-bit character codes generally succeeded the five-bit Baudot code and preceded seven-bit ASCII. One popular variant was DEC SIXBIT. This is simply the ASCII character codes 
 
    from 32 to 95 coded as 0 to 63 by subtracting 32 (i.e., columns 2, 3, 4, and 5 of the ASCII table (16 characters to a column), shifted to columns 0 through 3, by subtracting 2 from the high bits); it includes the space, punctuation characters, numbers, 
 
    and capital letters, but no control characters. Since it included no control characters, not even end-of-line, it was not used for general text processing. However, six-character names such as filenames and assembler symbols could be stored in a single 
 
    36-bit word of PDP-10, and three characters fit in each word of the PDP-1 and two characters fit in each word of the PDP-8. Six-bit codes could encode more than 64 characters by the use of Shift Out and Shift In characters, essentially incorporating 
 
    two distinct 62-character sets and switching between them. For example, the popular IBM 2741 communications terminal supported a variety of character sets of up to 88 printing characters plus control characters. 
 

 

 

 
</div>

+0

謝謝堆! @repzero –

+0

歡迎...如果這符合您的要求,隨時接受解決方案..:D:D – repzero