기초공사 (html,css,javascript)
animation무한반복 / :after, .after차이 본문
회의: '목소리등록'버튼을 click한 후 바탕을 클릭해도 무한으로 돌아가게 하는 기능
infinite 기능이 맞았다.
:active와 .active를 착각했다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<style>
.l-btn {
overflow:visible;
/* background:#e9d9ff; */
}
/******화자등록 / 화자인증 button *******/
/* Ripple Out */
@keyframes hvr-ripple-out_border {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
/* 목소리등록 버튼 */
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
padding:1em;
margin:0.4em;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background:#fafafa;
}
/* border */
.hvr-ripple-out:before {
content: '';
display:block;
position: absolute;
border: #2d1cad solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* 무한반복 */
/* 발견한것, .play:active:before와 .play.active:before의 차이를 몰랐다.
| :active 사용자가 활성화한 요소(버튼 등)을 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다. |
.play.active:before{
border: #2d1cad solid 6px;
animation:hvr-ripple-out_border 1s infinite;
}
.hvr-ripple-out:hover:before,
.hvr-ripple-out:focus:before,
.hvr-ripple-out:active:before { 내가 :active를 쓰고있었음
border: #5f4bef solid 6px;
animation:hvr-ripple-out_border 1s infinite;
}
/*.hvr-ripple-out:active,
.hvr-ripple-out:hover,
.hvr-ripple-out:focus {
/* background:#e9d9ff;
background:#5f4bef;
color:#fff;
} */
</style>
<body>
<!--목소리등록란 -->
<ul style="text-align:center; margin-top:100px;">
<li class="play hvr-ripple-out" style="display:inline-block; margin:0 auto;">
<a href="#" class="easyui-linkbutton" style="padding:20px; margin:0 5px;">목소리등록</a>
</li>
<li style="display:inline-block; margin:0 auto;">
<a href="#" class="easyui-linkbutton stop" style="padding:20px; margin:0 5px;">일시정지</a>
</li>
<li class="stop" style="display:inline-block">
<a href="#" class="easyui-linkbutton" style="padding:20px; margin:0 5px;">등록취소</a>
</li>
</ul>
</div><!--easyui-panel 끝 -->
</div><!--easyui-layout -->
<script type="text/javascript">
//active를 넣었따빼면 됨.*/
// 이부분 추가
$('.play').click(function(){
$(this).addClass('active');
});
$('.stop').click(function(){
$('.play').removeClass('active');
});
</script>
</body>
</html>
느리지만,천천히, 갈길 가자