|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 這篇文章主要介紹了CSS 小結筆記之變形、過渡與動畫的示例的相關資料，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。1、過渡 transition 過渡屬性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分別單獨指定 transition-property: 是要過渡的屬性（如width，height），all是所有都改變。 transition-duration：花費的時間，單位為s或ms transition-timing-function：是指定動畫類型（運動區曲線），運動曲線有以下幾種 ease=>逐漸慢下來（默認值） linear=>勻速 ease-in=>加速 ease-out=>減速 ease-in-out=>先加速在減速 transition-delay 延遲時間，單位為s或ms <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
}
p:hover {
width: 500px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>結果如下，當鼠標上上去后變化不再是瞬間完成，而是過渡完成。
2、變形 transform (1)、2D變形 （a）移動 translate(x,y) 移動可以指定像素值也可以指定百分比， 注意：指定百分比是自身大小的百分比，因此可以用于設置盒子定位時的居中對齊（在設置left：50%后再移動自身的-50%即可）。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
}
p:active {
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
點擊之后盒子進行了移動。用于讓定位的盒子居中的代碼入下 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
}
.son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p class="fa">
<p class="son"></p>
</p>
</body>
</html>結果為
（b）縮放 scale（x，y） x,y設置大于1 是放大，小于1 是縮小。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
}
p:hover {
transform: scale(0.5, 2);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
（c）旋轉 rotate(x deg) x指定度數值，正數是順時針旋轉，負數是逆時針旋轉。 旋轉可以使用 transform-origin 指定旋轉中心點，transform-origin 給left top right bottom 也可以指定具體的像素值。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
p:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
（d）傾斜 skew（x deg ,y deg） x,y分別指定傾斜在x，y方向上的角度，可以為負數。y值不寫默認為0。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
}
p:hover {
transform: skew(30deg, 20deg);
}
</style>
</head>
<body>
<p></p>
</body>
</html>
（2）3D變形 （a）旋轉（rotateX,rotateY,rotateZ） 3D旋轉與2D類似，只不過一個是基于二位坐標一個是基于三維坐標。三個值可以同時指定也可以單獨指定。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
p:hover {
transform: rotateX(120deg);
/* transform: rotateY(120deg); */
/* transform: rotateZ(120deg); */
}
</style>
</head>
<body>
<p></p>
</body>
</html>
（b）移動（translateX，translateY，translateZ） 3D移動對于xy方向上的移動與2d移動一致。只有z方向上的移動不一樣。Z方向上的移動在現實生活中是距離變遠，距離變近。因此在網頁中顯示結果是變近則變大，變遠則變小。 要使Z放線上移動生效首先要設置perspective（眼睛距離屏幕的距離）; <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
/* 數值越小說明眼睛離的越近 */
}
p {
width: 200px;
height: 200px;
background-color: aqua;
transition: all 0.5s;
margin: 200px auto;
}
p:hover {
transform: translate3d(0, 0, 200px);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
3、動畫 animation （1）、 animation: animation- name || animation- duration|| animation- timing-function || animation- delay || animation- iteration-count|| animation- direction|| animation- fill-mode; animation-name:動畫名稱（自己使用@keyframes 定義的動畫） animation-duration：持續時間 animation-timing-function：運動曲線，與過渡的運動曲線類似。 animation-delay：延遲時間 animation-iteration-count：循環次數 （infinite 是無限循環） animation-direction：是否反向（動畫是否是由結尾倒開是倒著放的） animation-fill-mode：設置在動畫播放之外的狀態（結束時的狀態）none | forwards（設為結束時的狀態）| backwards(設為開始時的狀態)|both（設為開始或結束時的狀態） animation-play-state：設置動畫狀態 running 開始|paused 暫停 （2）、@keyframes 自定義動畫 格式如下 @keyframes 動畫名稱 {
from{ 開始} 0%
to{ 結束 } 100%
}可以用 from...to 來指定動畫過程，也可以用0%~100%指定動畫過程。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: 動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向 */
animation: move 5s linear 3;
}
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
總結：以上就是本篇文的全部內容，希望能對大家的學習有所幫助。更多相關教程請訪問 CSS視頻教程，CSS3視頻教程！ 相關推薦： 以上就是CSS 小結筆記之變形、過渡與動畫的示例的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
