CSS濾鏡實現(xiàn)的顏色漸變翻轉(zhuǎn)效果
發(fā)布時間：2014-10-09 09:51:36 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了利用CSS中的濾鏡效果實現(xiàn)漸變翻轉(zhuǎn)效果的代碼，不會的朋友可以和腳本之家的小編一起學(xué)習(xí)一下，以后想要實現(xiàn)漸變翻轉(zhuǎn)效果就不難啦
一下是利用CSS濾鏡效果實現(xiàn)漸變翻轉(zhuǎn)的代碼，有需要的朋友可以參考下。
復(fù)制代碼
代碼如下:<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.ddf{
margin: 0 auto;
width:150px;
height:125px;
background:#92B901;
color:#ffffff;
font-weight:bold;
font:12px '微軟雅黑', Verdana, Arial, Helvetica, sans-serif;
padding:20px 10px 0px 10px;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
<span style="color:#FF0000;">transition-property:width,height,transform,background,font-size,opacity;</span>
<span style="color:#FF0000;">transition-duration:1s,1s,1s,1s,1s,1s</span>;
border-radius:5px;
opacity:0.4;
}
.ddf:hover{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:16px;
}
</style>
</head>
<body>
<div class="ddf">轉(zhuǎn)著好玩</div>
</body>
</html>
CSS中transform: rotate(<span style="color:#FF0000;">360deg</span>);旋轉(zhuǎn)，默認(rèn)順時針旋轉(zhuǎn)參數(shù)為度數(shù)例如：360deg
</span><pre name="code" class="html"><span style="font-size:14px;">transition-property:過濾，后面接需要過濾的屬性例如：</span><span style="font-size:14px;">width,height,transform,background,font-size,</span><span style="font-size:14px;"></span>
<span style="font-size:14px;">transition-duration:后面接相應(yīng)過濾屬性的執(zhí)行時間。</span><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;">opacity：</span>規(guī)定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.ddf{
margin: 0 auto;
width:150px;
height:125px;
background:#92B901;
color:#ffffff;
font-weight:bold;
font:12px '微軟雅黑', Verdana, Arial, Helvetica, sans-serif;
padding:20px 10px 0px 10px;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
<span style="color:#FF0000;">transition-property:width,height,transform,background,font-size,opacity;</span>
<span style="color:#FF0000;">transition-duration:1s,1s,1s,1s,1s,1s</span>;
border-radius:5px;
opacity:0.4;
}
.ddf:hover{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:16px;
}
</style>
</head>
<body>
<div class="ddf">轉(zhuǎn)著好玩</div>
</body>
</html>
CSS中transform: rotate(<span style="color:#FF0000;">360deg</span>);旋轉(zhuǎn)，默認(rèn)順時針旋轉(zhuǎn)參數(shù)為度數(shù)例如：360deg
</span><pre name="code" class="html"><span style="font-size:14px;">transition-property:過濾，后面接需要過濾的屬性例如：</span><span style="font-size:14px;">width,height,transform,background,font-size,</span><span style="font-size:14px;"></span>
<span style="font-size:14px;">transition-duration:后面接相應(yīng)過濾屬性的執(zhí)行時間。</span><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;">opacity：</span>規(guī)定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
相關(guān)文章
- 這篇文章給大家分享的是利用純css實現(xiàn)圖片翻轉(zhuǎn)效果，對大家的學(xué)習(xí)使用CSS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。2016-10-09
一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程
這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實例教程，css3使我們能夠跳出2d空間，實現(xiàn)3維空間的動畫效果，這里給出一個自動翻轉(zhuǎn)的3d色子動畫效果制作過程2014-12-31- 這篇文章主要介紹了css3實現(xiàn)3D色子翻轉(zhuǎn)特效的制作過程及示例代碼，非常的不錯，效果也非常棒，這里推薦給大家。2014-12-23
一款利用純css3實現(xiàn)的360度翻轉(zhuǎn)按鈕的實例教程
這篇文章主要為大家介紹了利用純css3實現(xiàn)的翻轉(zhuǎn)360動畫按鈕的方法，代碼簡單易懂，實現(xiàn)出來的效果卻很美觀，需要的朋友可以過來復(fù)制代碼，順便學(xué)習(xí)一下2014-11-05純CSS實現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動畫效果
隨著瀏覽器技術(shù)的進(jìn)步，CSS動畫技術(shù)已經(jīng)不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強(qiáng)大的事情2014-04-23css控制列表與導(dǎo)航的制作(水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)
這篇文章主要介紹了css控制列表與導(dǎo)航的制作,包括水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例
這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下2014-04-08CSS圖片翻轉(zhuǎn)動畫技術(shù)詳解（IE也實現(xiàn)了）
因為不斷有人問我，現(xiàn)在我補(bǔ)充一下：IE是支持這種技術(shù)的！盡管會很麻煩。需要做的是旋轉(zhuǎn)front和back元素，而不是旋轉(zhuǎn)整個容器元素。如果你使用的是最新版的IE，可以忽略這2014-04-03- css 2.0還是沒有翻轉(zhuǎn)的，3.0里面有rotate屬性，這個可以把元素進(jìn)行任意角度旋轉(zhuǎn)，灰常強(qiáng)大，下面有個不錯的示例，大家可以參考下2014-02-27
CSS Cookbook 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效
CSS Cookbook例子 創(chuàng)建文字導(dǎo)航菜單和翻轉(zhuǎn)特效2009-12-15