HTML5+CSS3 (2)
2D
transform
transform(轉換)是css3新增的屬性 能夠實現元素的旋轉 位移 縮放等效果
二維座標系
2D轉換是改變元素在二維平面上形狀和位置的一種技術css
translate(位移)
注意事項html
- 所謂的位移 是沿着x軸和Y軸移動位置
- 不會影響到其它元素的位置
- 對行內元素無效
使用方法css3
- translate(x,y)
- translateX(n):針對X軸
- translateY(n):針對Y軸
- translate(50%,50%) 這裏的百分比是根據自身寬度和高度進行移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
margin: 20px 100px;
}
div[class="box"] {
background-color: blue;
transform: translate(200px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
<div></div>
</body>
</html>
讓盒子實現水平和垂直居中對齊
注意：盒子必須是塊級元素和行內塊元素。能夠用tanslate實現，用定位和translate配合更佳動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 600px;
height: 600px;
margin: 200px auto;
background-color: red;
}
p {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: blue;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
旋轉
注意事項url
- 旋轉的單位爲deg
- 正值爲順時針旋轉 負值爲逆時針旋轉
- 旋轉的中心點爲元素的中心點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
margin: 500px auto;
border-radius: 20px;
/* 過渡的效果 */
transition: all 2s linear 0s;
}
img:hover {
/* 旋轉180deg */
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="./image/抽象.jpg" alt="">
</body>
</html>
三角形案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 35px;
border: 1px solid black;
}
/* 利用僞元素製做案例 */
.box::after {
position: absolute;
top: 9px;
left: 175px;
content: '';
width: 10px;
height: 10px;
border-right: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(45deg);
transition: all 2s linear 0s;
}
/* 鼠標通過div時旋轉 */
.box:hover::after {
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
改變旋轉中心點
transform-origin:x y
- x y之間用空格相隔開
- 默認的旋轉中心點（50% 50%）
- 能夠用像素或者方位名詞表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 200px auto;
transition: all 6s linear 0s;
/* 旋轉中心點 左下角 */
transform-origin: left top;
}
.box:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
旋轉案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
width: 400px;
border: 1px solid red;
margin: 200px auto;
overflow: hidden;
}
.box::after {
display: block;
content: "";
width: 400px;
height: 400px;
background-color: red;
transform-origin: right bottom;
transform: rotate(90deg);
transition: all 1s linear 0s;
}
.box:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
縮放
scale(x,y)
注意事項spa
- scale(1,1) 寬高及放大1倍
- scale(2,3) 寬放大2倍 高放大3倍
- scale(5) 寬高都放大5倍
優勢：能夠設置旋轉中心點，縮放的時候不會影響其它元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 使用過渡效果 */
transition: all 2s linear 0s;
/* 讓盒子居中對齊 */
margin: 200px auto;
}
.box:hover {
/* 放大2.0倍 不會影響其它元素的位置 */
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
圖片放大案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* img放大star */
* {
margin: 0;
padding: 0;
}
div {
float: left;
overflow: hidden;
width: 450px;
height: 288px;
margin: 50px;
}
img {
transition: all 2s linear 0s;
}
img:hover {
transform: scale(2);
}
/* img放大 end */
</style>
<body>
<div><img src="./image/星空.jpg" alt=""></div>
<div><img src="./image/星空.jpg" alt=""></div>
<div><img src="./image/星空.jpg" alt=""></div>
</body>
</html>
分頁按鈕案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 200px auto;
}
li {
float: left;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #cccccc;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 50px 20px;
transition: all 3s linear 0s;
}
li:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>
2D綜合寫法
注意事項3d
- CSS 2D的屬性能夠簡寫
- transform:translate(x,y) rolate(n) scale(n) 按照這個順序來寫，屬性之間用空格相隔
- 位移放在最前面 切記不能改變順序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 設置過渡效果 */
transition: all 2s linear 0s;
}
.box:hover {
/* 記住順序 先設置 *位移 再設置旋轉 最後設置縮放*/
transform: translate(200px, 200px) rotate(200deg) scale(2);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
動畫
動畫 相比於過渡 能夠實現更多變化 更多控制 自動播放等
使用動畫的步驟
- 先定義動畫
- 再使用（調用）動畫
- 定義動畫使用@keyframes 0%是起始狀態 100%是結束狀態。
- 調用動畫必須須要的兩個屬性 animation-name ainimation-duration(動畫的持續時間)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 定義動畫 */
@keyframes move {
0% {
transform: translate(0px, 0px);
}
100% {
/* 警告 ：translate(x,y)要加逗號 */
transform: translate(1000px, 0px);
background-color: blue;
border-radius: 50%;
}
}
.box {
width: 200px;
height: 200px;
background-color: red;
/* 動畫的名字 */
animation-name: move;
/* 動畫的持續時間 */
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動畫的基本實現
注意事項code
- form to等價於 0% 100%
- 實現更多細節能夠用百分比來實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 800px);
}
75% {
transform: translate(0px, 800px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
animation-name: move;
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動畫屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 定義動畫 */
@keyframes move {
25% {
transform: translate(1350px, 0px);
}
50% {
transform: translate(1350px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.pic-con {
width: 450px;
height: 288px;
overflow: hidden;
border-radius: 40px;
margin: 10px;
/* 使用動畫 */
/* 動畫名字 */
animation-name: move;
/* 動畫的持續時間 */
animation-duration: 4s;
/* 動畫的運動曲線 */
animation-timing-function: linear;
/* 動畫的延遲 */
animation-delay: 0s;
/* 動畫的播放次數 */
animation-iteration-count: infinite;
/* 是否反方向播放 */
animation-direction: alternate;
/* 動畫結束後保持的狀態 可省略*/
/* animation-fill-mode: forwards; */
}
/* 鼠標移動到此處 動畫中止播放 */
.pic-con:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="pic-con">
<img src="./image/星空.jpg" alt="">
</div>
</body>
</html>
注意事項 規定動畫結束後的狀態與動畫的播放次數和是否反向播放有衝突orm
動畫的簡寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 800px);
}
75% {
transform: translate(0px, 800px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
/* 動畫的簡寫 */
animation: move 10s linear 0s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
/* 動畫的簡寫 */
animation: move 10s linear 0s infinite alternate;
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
熱點圖
思路：利用定位和動畫可作出效果，必須確保向外擴散的波浪線位於中心位置，且用盒子陰影顏色替代背景色htm
注意：爲何不用scale呢，由於scale會把盒子的陰影放大，視覺會受到影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333333;
}
.map {
/* 使用定位 自絕父相 */
position: relative;
width: 747px;
height: 617px;
background: url(./image/map.png) no-repeat;
margin: 200px auto;
}
.city {
position: absolute;
top: 194px;
left: 500px;
width: 80px;
height: 80px;
}
div.city1 {
position: absolute;
top: 460px;
left: 606px;
}
div.city2 {
position: absolute;
top: 508px;
left: 500px;
}
.circle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: blue;
border-radius: 50%;
}
div[class^="wave"] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0px 0px 20px skyblue;
border-radius: 50%;
/* 使用動畫 */
animation: move 2s linear 0s infinite;
}
.city .wave2 {
/* 使用動畫 */
animation: move 2s linear 10s infinite;
}
.city .wave3 {
/* 使用動畫 */
animation: move 2s linear 20s infinite;
}
/* 定義動畫 */
@keyframes move {
50% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
<div class="city city1">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
<div class="city city2">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
</div>
</body>
</html>
速度曲線詳解
打字機效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 思路：利用步長可實現打字機效果 */
* {
margin: 0;
padding: 0;
}
.box {
width: 0px;
height: 30px;
/* 讓文本強制一行顯示 */
white-space: nowrap;
/* 剪裁 */
overflow: hidden;
font-size: 20px;
background-color: pink;
animation: move 2s steps(10) 0s infinite;
}
/* 定義動畫 */
@keyframes move {
0% {
width: 0px;
}
100% {
width: 280px;
}
}
</style>
</head>
<body>
<div class="box">你們好,個人名字叫作堯子陌</div>
</body>
</html>
奔跑的小熊
注意：背景圖片和小熊的奔跑，用的是背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(./image/抽象.jpg) no-repeat fixed top center;
background-size: cover;
}
.box {
position: fixed;
width: 200px;
height: 100px;
top: 50%;
transform: translate(0px, -50px);
background: url(./image/bear.png) no-repeat;
animation: bear 0.4s steps(8) 0s infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0px;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
相關文章
- 1. HTML5CSS3
- 2. html5css3利用僞類作小圖標
- 3. 6款基於SVG的HTML5CSS3應用和動畫
- 4. HTML5 – 2.新元素
- 5. 2-1 2-2 2-3 2-4 2-5 2-6 2-7： Model regression and Cost function
- 6. 作業2（2）
- 7. Angular 2 Decorators - 2
- 8. ElasticSearch 2 (2) - Setup
- 9. 2020-2-2賽
- 10. 2018/6/2-2
- 更多相關文章...
- • Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
- • QBC的2種檢索方式 - Hibernate教程
- • C# 中 foreach 遍歷的用法
- • RxJava操作符（二）Transforming Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
