<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心</title>
<style>
* {
margin:0;
padding: 0;
}
body {
width: 100%;
background-color: #000;
}
.heart {
width: 200px;
height: 200px;
position: relative; /* 三個定位可以讓三個div組合在一起 */
margin:0 auto;
top:100px;
animation: shake 0.5s 0s infinite; /*動畫名 完成一個週期所需要的時間s/ms 延遲時間 播放次數-無線循環*/
}
.left-top, .right-top{
width: 200px;
height: 200px;
background: #f00;
border-radius: 100px 100px 0 0; /* 上 右 下 左 */
position: absolute;
box-shadow: 0px 0px 50px red; /*陰影 水平陰影 垂直陰影 陰影範圍 顏色*/
}
.down {
width: 200px;
height: 200px;
background: #f00;
position: absolute;
box-shadow:0px 0px 50px red; /*陰影 水平陰影 垂直陰影 陰影範圍 顏色*/
transform: translate(0,64px) rotate(45deg) scale(0.9,0.9); /* translate 位移 rotate 旋轉 scale 縮放 */
}
.left-top {
transform: translate(-50px,0) rotate(-45deg);
}
.right-top {
transform: translate(50px,0) rotate(45deg); /* translate 位移 rotate 旋轉 */
}
/*定義動畫*/
@keyframes shake {
from {
transform:scale(0.9,0.9);
}
to {
transform:scale(1.1,1.1);
}
}
</style>
</head>
<body>
<div class="music">
<audio src="music/xin.mp3" controls="controls" autoplay="autopaly" loop="true">
<!-- loop="true" 一直循環 -->
<!-- autoplay 如果出現該屬性，則音頻在就緒後馬上播放。
controls 如果出現該屬性，則向用戶顯示控件，比如播放按鈕
loop 如果出現該屬性，則每當音頻結束時重新開始播放。 -->
</audio>
</div>
<div class="heart">
<div class="left-top"></div>
<div class="right-top"></div>
<div class="down"></div>
</div>
</body>
</html>一個跳動的愛心送給你，你接受嗎?哈哈
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
用css寫六邊形
div佈局<div class="box1"></div><div class="box3"></div><div class="box2"></div>css.box1{ width: 58px;