귀찮아

테이블내용 .table_area {width: 100%; overflow:hidden; position: relative;} .table_area::after {position:absolute; top:0; left:100%; width:50px; height:100%; border-radius:10px 0 0 10px / 50% 0 0 50%; box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25); content:'';} .table_area > div {overflow-x: auto;} .table_area table {width:700px !important; } https://www.456bereastreet.com/lab/responsive-scrollable-tables..

type 01 scroll down /* scroll down */ .scroll_down {width:2px; height:64px; background:rgba(255,255,255,.2); position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:0; overflow:hidden;} .scroll_down span {animation:scroll_effect .75s infinite alternate linear; display:block;font-size: 0; width:2px; height:20px; background:#fff; position:absolute; top:0; left:0;} .scroll_down..

tab1 tab2 tab3 tab1 tab2 tab3 .tabs { list-style: none; position: relative; width:1100px; margin:0 auto; border: 1px solid #333;} .tabs input[type='radio'] { display: none;} .tabs .tabs-nav { display: table; table-layout: fixed; width: 100%;} .tabs .tabs-nav label { display: table-cell; background-color: #eee; color: #333; padding: 25px 0; text-align: center; font-size:20px; font-weight: 600; tr..

/*bg_zoomin*/ .bg_zoomin { -webkit-animation: zoom-a 15s linear infinite alternate; /* Safari 4+ */ -moz-animation: zoom-a 15s linear infinite alternate; /* Fx 5+ */ -o-animation: zoom-a 15s linear infinite alternate; /* Opera 12+ */ -ms-animation: zoom-a 15s linear infinite alternate; /* Opera 12+ */ animation: zoom-a 15s linear infinite alternate; /* IE 10+, Fx 29+ */ } @-webkit-keyframes zoom..

한줄 말줄임 .single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 두줄이상 말줄임 .multi-line { height: 28px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/*배경 줌인*/ .bg_zoomin { -webkit-animation: zoom-a 15s linear infinite alternate; /* Safari 4+ */ -moz-animation: zoom-a 15s linear infinite alternate; /* Fx 5+ */ -o-animation: zoom-a 15s linear infinite alternate; /* Opera 12+ */ animation: zoom-a 15s linear infinite alternate; /* IE 10+, Fx 29+ */ } @-webkit-keyframes zoom-a { 0% { background-size: 100% auto; } 100% { background-size: 120% auto..

/*바운스*/ .bounce { animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate;} @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } @-webkit-keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } }

css로 뱅글뱅글 돌아가게 #rotating_img { -webkit-animation: rotation 5s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} }