寫在前面
1、基于2022級計算機大類實驗指導書
2、代碼僅提供參考，前端變化比較大，按照要求，只能做到像，不能做到一模一樣
3、圖片和文字僅為示例，需要自行替換
4、如果代碼不滿足你的要求，請尋求其他的途徑
運行環境
window11家庭版
WebStorm 2023.2.2
實驗要求、源代碼和運行結果
1、編寫代碼實現圖5-1所示變換效果，要求：
① 原始效果效果如圖5-1a所示，在一個div中包裹3個子div，每個子div包裹一個圖像，所有圖像居中排列，父div得寬度為1000px、高度為180px、有邊框陰影（陰影尺寸5px、模糊距離15px、顏色#F4E4D4）。每個子div得寬度為300px、高度為180px、過渡時間為3秒。
② 鼠標移動到子div1元素時，div元素X軸方向移動665px、Y軸方向移動200px，效果如5-2b所示。
③ 鼠標移動到子div2元素時，扭曲210°、在所有屬性上過渡3秒，效果如5-2b所示。
④ 鼠標移動到子div3元素時，在Y軸上旋轉50°、在所有屬性上過渡3秒，效果如5-2b所示。
圖5-1a 未變換前的圖形展示示意圖
圖5-1b 子div1變換后的圖形展示示意圖
圖5-1c 子div2變換后的圖形展示示意圖
圖5-1d 子div3變換后的圖形展示示意圖
提示：
1.box-shadow語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離（虛實）? 陰影尺寸（影子大小）? 陰影顏色? 內/外陰影；
2.CSS transform屬性的方法：
translate():從其當前位置移動元素（根據為 X 軸和 Y 軸指定的參數）。
rotate（n deg）：旋轉N度。
? skew(x deg,y deg)是將元素沿X軸和Y軸方向同時傾斜給定的角度.
3.過度屬性語法格式
transition: 屬性名稱 過渡時間 速度曲線 延遲時間;
Experiment5_1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="Experiment5_1.css"><title></title>
</head>
<body>
<div class="parent-div"><div class="child-div"><img src="../1.jpg"></div><div class="child-div"><img src="../2.jpg"></div><div class="child-div"><img src="../3.jpg"></div>
</div>
</body>
</html>Experiment5_1.css
.parent-div {width: 1000px;height: 180px;border: 1px solid #F4E4D4;box-shadow: 0 0 15px 5px #F4E4D4;display: flex;justify-content: space-around;align-items: center;
}.child-div {width: 300px;height: 180px;transition: all 3s;overflow: hidden;
}.child-div:hover:nth-child(1) {transform: translate(665px, 200px);
}.child-div:hover:nth-child(2) {transform: rotate(210deg);
}.child-div:hover:nth-child(3) {transform: rotateY(50deg);
}原始效果
鼠標移動到子div1元素時
鼠標移動到子div2元素時
鼠標移動到子div3元素時
2、編寫代碼實現圖5-2所示心跳效果，要求：
① 打開網頁文檔，心形閃爍，實現心跳效果。
② 圖片寬度為200px，高度為自動。
③ 采用animation實現動畫效果，動畫完成時間為0.5s。
④ tansform:scale()實現圖形伸縮，比例為1.1倍。
圖5-2 心跳效果
提示：
1）animation語法格式：
animation:動畫名稱 花費時間 運動曲線? 何時開始? 播放次數? 是否反方向;
2）animation設置為三種狀態：0%? 50% 100%，并設置為無限次循環。
Experiment5_2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="Experiment5_2.css"><title></title>
</head>
<body><img src="../6.jpg" class="heart"><img src="../6.jpg" height="200px" width="200px">
</body>
</html>Experiment5_2.css
@keyframes heartbeat {0%, 100% {transform: scale(1);}50% {transform: scale(1.1);}
}body {display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;
}.heart {width: 200px;height: auto;animation: heartbeat 0.5s ease-in-out infinite;
}
 - 華為OD統一考試（C卷）)
