2019/09/26 5

0926 마지막 수업_클릭하면 애니메이션 실행하기

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh; background: url('img/main_bg.jpg'); background-size: cover; overflow: hidden;} .section1{width: 740px; height:325px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; display:none;} .section1 p{position: absolute; background: #000;} p.top{width: 0; height: 1px; left:0; top:0; }..

제이쿼리 애니메이션: callback을 이용해서 움직이는 선 박스 만들기

DOCTYPE html> Document *{box-sizing: border-box;} body{height:100vh;} .section1{width: 740px; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%);} .section1 img{width: 100%; opacity:0;} .section1 p{position: absolute; background: #000;} p.top{width: ; height: 1px; left:0; top:0; } p.right{width: 1px; height: ; right:0; top:0;} p.bottom{width: ; height: 1px; right:0; bottom: ..

클릭하면 다른 이미지와 다른 글씨들이 보이게 하기:호텔농심참고

참고사이트호텔농심https://www.hotelnongshim.com/kr/?ref=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8%3D DOCTYPE html> Document *{box-sizing: border-box;} .wrap{height: 540px;margin: auto; display: flex;} ul.time{width: 220px; height: 100%; font-size: 30px;} ul.time li{cursor:pointer;} ul.time li.on{color:red;} ul.content{width: 630px; height: 100%; position: relative;} ul.content li{position: absolute; display:none;}..

반응형