반응형
소스
<!DOCTYPE html>
<html lang="ko" >
<head>
<meta charset="UTF-8">
<title>HTML5 Audio CSS style</title>
<style>
audio {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow: 2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
background-color: #f2f2f2;
width:400px;
}
audio:hover, audio:focus, audio:active {
-webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
background-color: #f2f2f2;
}
</style>
</head>
<body>
<audio controls>
<source src="음악파일주소" type="audio/mpeg">
</audio>
</body>
</html>반응형
'디자인소스' 카테고리의 다른 글
| Musical Christmas Lights equalizer 효과 (0) | 2023.10.08 |
|---|---|
| Digital Clock 디지탈 시계 (0) | 2023.10.04 |
| [HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration (0) | 2023.10.04 |
| 티스토리 블로그 더보기 버튼 css로 꾸미기 (0) | 2023.09.26 |
| CSS 웹 페이지 터치 이벤트 (0) | 2023.09.23 |
| 깔끔한 jQuery Audio Player (0) | 2023.09.23 |
| HLS M3U8 Player (0) | 2023.09.21 |
| Animated text fill 애니메이션 텍스트 (0) | 2023.09.21 |
댓글