整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS3過渡動畫函數總結

          CSS3過渡動畫函數總結

          SS3過渡動畫函數總結,總結了動畫函數屬性transition-timing-function里面的值的用法,方便大家以后使用該屬性時就知道有這么一回事!

          代碼如下:

          html結構:

          css樣式:

          用技巧會讓人變的越來越懶,沒錯,我就是想讓你變懶。

          下面是我收集的CSS高級技巧,希望你懶出境界。

          黑白圖像

          這段代碼會讓你的彩色照片顯示為黑白照片,是不是很酷?

          img{
          filter: grayscale(100%);
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          }
          

          效果圖:

          頁面頂部陰影

          下面這個簡單的 CSS3 代碼片段可以給網頁加上漂亮的頂部陰影效果:

          body:before {
           content: "";
           position: fixed;
           top: -10px;
           left: 0;
           width: 100%;
           height: 10px;
           -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
           -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
           box-shadow: 0px 0px 10px rgba(0,0,0,.8);
           z-index: 100;
          }
          

          效果圖:

          給 body 添加行高

          你不需要分別添加 line-height 到每個p,h標記等。只要添加到 body 即可:

          body {

          line-height: 1;

          }

          這樣文本元素就可以很容易地從 body 繼承。

          CSS3 線性漸變

          為了創建一個線性漸變,你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時,你也可以設置一個起點和一個方向(或一個角度)。

          #grad {
           background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
           background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
           background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
           background: linear-gradient(red, blue); /* 標準的語法 */
          }
          

          效果圖:

          突然發現紅到藍也太丑了點,換一個好看一點的,紅到綠:

          字體陰影

          h1
          {	text-shadow: 5px 5px 5px #FF0000;
          }
          

          CSS3 過渡

          div
          {
          	width:100px;
          	height:100px;
          	background:red;
          	transition:width 2s;
          	-webkit-transition:width 2s; /* Safari */
          }
          div:hover
          {
          	width:300px;
          }
          

          效果如圖:

          今天的代碼寫得我老闊疼,雖然CSS還有很多很多高級用法,但精力有限,因此今天的分享就到這里啦,需要詳細代碼可留言或私信我哦~

          css3過渡 轉換

          css3過渡(transition)允許我們在限定的時間內從一個屬性值轉變到另一個屬性值.

          ●transition-property:指定要轉換的屬性

          ●transition-duration:指定轉換發生的持續時間

          ●transition-timing-function:指定轉換的速度在其持續時間內如何變化

          ●transition-delay:指定過渡效果的延遲(以秒為單位)

          在下面的例子中,我們將transition屬性設置為持續時間為5s的轉換效果.并設置ease-in定時函數,該函數有淡入的效果.

          css代碼:

          transition:transform 5s ease-in;

          過渡效果可以應用于各種css屬性,包括:背景顏色,寬度,高度,不透明度等等.

          在下面的例子中,div元素的寬度和高度都是100px,并有一個紅色的背景.我么為width屬性指定一個過渡效果,持續時間為3s.

          css代碼:

          div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }

          div.transition:hover{ width:250px;}

          效果如下:

          如果你將光標懸停在div元素上,則會從左向右移動.

          當光標被移出div元素時,它將逐漸變回原來的樣式.

          transition-timing-function屬性指定過渡效果的速度曲線.

          它可以有以下值:

          ease:動畫開始緩慢,然后加速(默認值)

          ease-in:緩慢開始,然后加速,突然停止.

          ease-out:快速啟動,但減速停止.

          ease-in-out:類似于緩解,但更加微妙的加速和減速.

          linear:勻速轉換

          cubic-bezier()函數,它允許你在cubic-bezier(立方體-貝塞爾)函數中定義你自己的值.取值范圍為0~1之間.

          css代碼:

          transition-timing-function:cubic-bezier(0,0,1,1);

          二 css3 transform:rotate()

          css3中transform(轉換)允許你翻轉,旋轉,縮放和傾斜元素.

          transform(轉換)是一種讓元素更改形狀,大小和位置的效果

          css3支持2d和3d轉換.

          設置15deg的角度旋轉(順時針方向旋轉),css代碼如下:

          transform:totate(15deg);

          正值,順時針旋轉;負值,逆時針旋轉.

          三 css3 transform-origin,translate(),skew()

          transition-origin(原點)屬性允許你更改要轉換元素的位置.該屬性的默認值是50% 50%,對應于元素的中間.

          在下面的例子中,我們將transform-origin屬性和transform-ratate一起使用.x軸(水平)的原點從左側設定為30%.

          y軸(垂直)的原點從上方設定為80%.

          css代碼:

          div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

          div.green-div{ padding:50px; position:absolute;background-color:LightGreen;border:2px solid red;transform:rotate(15deg);transform-origin:30% 80%;}

          效果如下:

          0 0 與左上相同,100% 100%與右下相同.

          transform-origin屬性必須與transform屬性一起使用.

          translate()方法從當前位置移動一個元素(根據給定的x軸和y軸的參數).正值會將元素

          向下推到其默認位置的右側.而負值則會將元素向上并拖至其默認位置的左側.

          css代碼:

          transform:translate(120px,60px);

          skew()通過給元素設置x軸和y軸的傾斜角度值來實現傾斜.

          以下例子,沿著x軸將<div>元素傾斜45度

          css代碼:

          transform:skew(45deg);

          -webkit-transform:skew(45deg);

          如果沒有指定第二個參數,則它的默認值為零.

          四 css3 scale()函數和多重變換

          scale()方法根據已設定的高度和寬度參數來增加或減少元素的大小.1代表原始大小,2代表原始尺寸的兩倍,以此類推.

          css代碼:

          transform:scale(0.7 0.7);

          如果只傳遞一個參數,則默認寬度與高度都使用該參數.

          一次可以使用多個轉換.比如同時旋轉和縮放元素的大小.對元素應用多個變換,只需要用空格隔開它們.

          css代碼:

          transform:rotate(35deg) translate(120px);

          五 css3關鍵幀與動畫

          動畫讓一個元素從一種風格變為另一種風格.

          你可以根據需要更改任意數量的css屬性.

          關鍵幀將保存元素在特定時間的樣式

          @keyframes規則

          當你在@keyframes規則中指定css樣式時,動畫將在某些時間從當前樣式逐漸變為新樣式.

          要使動畫起作用,必須將動畫綁定到元素.

          以下例子,將更改元素的背景顏色三次:動畫完成50%,完成70%,動畫完成100%時.

          @keyframes animation-name{ 0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}

          100% {background-color:green;} }

          animation-name是為動畫指定的名字,你可以設置成任意的名字.

          作為百分比的替代方法,你可以使用from和to關鍵字分別代替0%起始點,100%結束點.

          要使動畫起作用,必須將動畫綁定到元素.

          在下面的例子中,動畫持續一秒鐘,并將紅色div的背景顏色更改為綠色和藍色

          div.animation{ width:100px;height:100px;background-color:red;animation-name:能否;animation-duration:1s;}

          @keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }

          效果如下:

          背景顏色將在1s內自動變化.

          animation-name:指定動畫的名字.

          animation-duration:指定所選動畫的持續時間.

          如果為指定animation-duration屬性,則動畫將不起作用.因為默認值是0.


          主站蜘蛛池模板: 无码午夜人妻一区二区三区不卡视频| 亚洲成人一区二区| 精品久久久久久中文字幕一区| 动漫精品一区二区三区3d| 国产福利电影一区二区三区久久老子无码午夜伦不 | 精品一区二区久久久久久久网站| 亚洲av无码一区二区三区四区| 国模视频一区二区| 中文字幕精品一区二区三区视频| 午夜天堂一区人妻| 久久久久久人妻一区二区三区| 一区 二区 三区 中文字幕| 亚洲日韩国产精品第一页一区| 国产精品视频一区二区猎奇| 亚洲第一区视频在线观看| 亚洲一区二区三区无码影院| 一区二区三区美女视频| 国产一区二区三区不卡在线看| 国产怡春院无码一区二区| 亚欧免费视频一区二区三区| 亚洲一区精品无码| 中文字幕国产一区| 国产精品亚洲午夜一区二区三区| 国产一区二区视频免费| 国产精品伦一区二区三级视频| 老熟妇仑乱视频一区二区| 精品欧洲av无码一区二区| 高清在线一区二区| 亚洲色无码专区一区| 成人免费区一区二区三区| 中文字幕一区二区人妻性色 | 久久精品一区二区东京热| 日本一区二区三区在线网 | 久久亚洲国产精品一区二区| 人妻夜夜爽天天爽爽一区| 一区二区免费国产在线观看| 人体内射精一区二区三区| 中文字幕一区二区在线播放| 无码人妻精品一区二区蜜桃| 国产精品女同一区二区| 亚洲一区二区三区国产精品|