網(wǎng)站seo中8個簡單的CSS3轉換

< / DIV >
<體>
< / HTML >

既然如此，設置其寬度和高度（所以它的尺寸），它的背景顏色（所以我們可以看到它）及其過渡性質。
<風格類型=“文本/ CSS”>
體> div
{
寬度：483px；
高度：298px；

背景：# 676470；

過渡：所有
0.3s的自在；
過渡屬性有三個值：過渡性質的（在我們的情況下，所有的）過渡的速度（在我們的情況下，0.3秒）和三分之一的價值，讓你改變的加速度和減速度的計算，但我們會堅持離開這個空白的默認。
現(xiàn)在我們需要做的是改變性質，他們會使我們…
如果你想跟隨你在這里下載的演示文件。

1。淡入
有東西消失在從客戶相當普遍的要求。它強調功能或關注呼吁采取行動的好方法。
淡入的效果在兩步編碼：第一，你設置的初始狀態(tài)；其次，你設置的改變，例如在盤旋：

。褪色
{

不透明度：0.5；

}

。褪色：懸停

{

不透明度：1
（確保你設置你的div“褪色”看到這類的工作。）

2。改變顏色
在改變過去是令人難以置信的復雜的色彩，用各種數(shù)學計算中涉及不同的RGB值，然后將它們結合起來。現(xiàn)在，我們只需設置DIV的類“顏色”并指定我們想要在我們的CSS顏色：
顏色：懸停

{

背景：# 53a7ea；

三.成長與收縮
成長的一個元素，你必須使用它的寬度和高度，或填充。但是現(xiàn)在我們可以使用CSS3的變換放大。
設置你的div的類“成長”，然后將這個代碼添加到你的風格的塊：
。成長：懸停

{

WebKit的變換：規(guī)模（1.3）；

MS變換：規(guī)模（1.3）；

變換：規(guī)模（

收縮的一個元素作為生長一樣簡單。放大元件我們指定一個大于1的值，它收縮，我們指定的值小于1：
。收縮：懸停

{

WebKit的變換：規(guī)模（0.8）；

MS變換：規(guī)模（0.8）；

變換：規(guī)模（

4。旋轉元素
CSS變換具有許多不同的用途，和一個改變一個元素的旋轉。給你的div類“旋轉”，請將下面的代碼添加到CSS：
。旋轉：懸停

{

WebKit的變換：rotatez（- 30℃）；

MS變換：rotatez（- 30℃）；

變換：rotatez（-

5。廣場圈
目前一個很受歡迎的效果過渡方元成圓的，反之亦然。使用CSS，這是一個簡單的效果來實現(xiàn)的，我們只是過渡的border-radius屬性。
給你的div類“圈子”和添加CSS樣式：
。圈：懸停

{

邊界半徑：50%；

6。3D陰影
3D陰影不滿一年左右，因為他們沒有看到與平面設計相兼容，這當然是無稽之談，他們的工作非常好，給他們的相互作用和與平板用戶的反饋，或假3D界面。
這種效果是通過增加一個盒子的影子，然后移動元素在X軸使用變換和轉化特性使它似乎走出屏幕。
給你的div班級“投”，然后將下面的代碼添加到你的CSS：
。之后：懸停

{

盒陰影：

1px 1px # 53a7ea，

2px 2px # 53a7ea，

3px 3px # 53a7ea；

WebKit的變換：translatex（- 3px）；

7。擺動
不是所有的元素使用的過渡性質。我們也可以創(chuàng)建非常復雜的動畫使用“關鍵幀動畫和動畫迭代。
在這種情況下，我們會先定義一個CSS動畫在你的風格。 你會注意到，由于執(zhí)行的問題，我們需要使用“- WebKit的關鍵幀和關鍵幀”（是的，Internet Explorer真的優(yōu)于鉻，至少在這一方面）。
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{

WebKit的變換：translatex（3px）；

變換：translatex（3px）；

}

65%

{

WebKit的變換：translatex（- 3px）；

變換：translatex（- 3px）；

}

80%

{

WebKit的變換：translatex（2px）；

變換：translatex（2px）；

}

100%

{

WebKit的變換：translatex（0）；


這個動畫只需將元左右，現(xiàn)在我們要做的就是將它：
。搖擺：懸停

{

WebKit的動畫：擺動1緩解；

動畫：擺動1緩解；

Webkit動畫迭代次數(shù)：1；

動畫

8。插圖的邊界
最熱的一個按鈕的風格，現(xiàn)在是鬼按鈕；一個沒有背景和沉重的邊框按鈕。當然，我們可以添加一個邊界元素簡單，但將改變元素的位置。我們可以用盒子大小的解決這一問題，但一個更簡單的解決方案是使用一個鑲框陰影邊界的過渡。
給你的div類“邊界”并添加下面的CSS樣式：
。邊界：懸停

{

盒陰影：插圖0 0 0 # 53a7ea
25像素之間；