솔라리어스
2018-03-24 21:45
조회: 6,152
추천: 3
나만의 하스스톤 영웅 인장하스스톤 영웅 방식으로 인장을 만들 수 있습니다. 초상화를 클릭하면 감정표현을 할 수 있고, 우측 아이콘을 클릭하면 마격을 줄 수 있습니다. (인장 구조 특성상 상단 인장이랑 동일하게 반응합니다. 하나만 있으면 문제없어요.) * 이용방법 * 소스코드 하단의 코드를 복사한 후 빨간 글자부분을 수정하시고 이용하시면 됩니다. (한글이나 워드에 붙여넣기 하시면 빨간 글자를 그대로 보실 수 있을겁니다.) * 소스코드 * <div id="background" style="width:455px;height:270px;padding-top:5px;position:relative;background-image:url('뒷배경 이미지 URL');background-size:cover;font-weight:bold;transform-style:3d-perspective;perspective:600px;"> <div data-inven-id="panel_cover" style="width:80px;height:230px;margin:10px 5px 0px 5px;float:left;"> <div data-inven-id="panel" style="overflow:hidden;float:right;width:100%;height:100%;transform:scale(0);transform-origin:100% 50%;transition:transform 0.1s;"> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak2,speak3,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak1':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 1번 명칭 </a> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak3,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak2':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 2번 명칭 </a> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak2,speak4,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak3':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 3번 명칭 </a> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak2,speak3,speak5,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak4':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 4번 명칭 </a> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak2,speak3,speak4,speak6,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak5':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 5번 명칭 </a> <a href="#" style="display:block;width:80px;height:30px;margin-bottom:10px;background:white;border:2px black solid;border-radius:5px;box-sizing:border-box;text-align:center;line-height:26px;font-weight:bold;cursor:pointer;color:black;text-decoration:none;" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak2,speak3,speak4,speak5,speak_lastattack':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak6':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }" data-inven-over-css="{'_SELF_':{'background':'#B2FFFF','text-decoration':'none'}}" data-inven-out-css="{'_SELF_':{'background':'white'}}"> 감정표현 6번 명칭 </a> </div> </div> <div data-inven-id="portrait-cover" style="float:left;width:180px;height:235px;margin:5px 0 0 0;border-radius:90px 90px 0 0;transition:box-shadow 0.2s,transform 0.2s;cursor:pointer;" data-inven-over-css="{'_SELF_':{'box-shadow':'0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 30px #228DFF'}}" data-inven-out-css="{'_SELF_':{'box-shadow':''}}" data-inven-click-css="{'panel':{'transform':'scale(1)'}}"> <a href="#" data-inven-hide="portrail" data-inven-show="panel" style="display:block;width:180px;height:210px;background-image:url('영웅 초상화 이미지 URL');background-size:cover;border:5px gold inset;border-radius:90px 90px 0 0;box-sizing:border-box;"> </a> <div style="width:180px;height:25px;background-color:#46372C;border:2px gold solid;border-top:0;box-sizing:border-box;color:white;font-size:14px;text-align:center;line-height:21px;"> 영웅 이름 </div> </div> <div id="speak_cover" style="float:left;width:170px;height:150px;"> <div data-inven-id="speak0" style="overflow:hidden;width:170px;height:120px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;margin:10px 5px 0 5px;float:left;transform:scale(1);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 최초 내용 </div> <div data-inven-id="speak1" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 1번 내용 </div> <div data-inven-id="speak2" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 2번 내용 </div> <div data-inven-id="speak3" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 3번 내용 </div> <div data-inven-id="speak4" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 4번 내용 </div> <div data-inven-id="speak5" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 5번 내용 </div> <div data-inven-id="speak6" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 감정표현 6번 내용 </div> <div data-inven-id="speak_lastattack" style="overflow:hidden;width:0px;height:0px;padding:8px;box-sizing:border-box;font-size:18px;background:white;border:2px black solid;border-radius:20px 20px 20px 5px;float:left;transform:scale(0);transform-origin:0% 100%;transition:transform 0.3s;color:black;text-decoration:none;"> 마무리일격 반응 내용 </div> </div> <div data-inven-action style="clear:right;float:right;margin:0 20px 0 0;border:0;" data-inven-nick-default="내 닉네임" data-inven-click-css="{ 'panel':{'transform':'scale(0)'}, 'speak0,speak1,speak2,speak3,speak4,speak5,speak6':{'transform':'scale(0)','width':'0','height':'0','margin':'0','padding':'0','opacity':'0.01'}, 'speak_lastattack':{'transform':'scale(1)','width':'170px','height':'120px','margin':'10px 5px 0 5px','padding':'8px','opacity':'1'} }"> <span data-inven-attr-for="input" style="display:none;"></span> <span data-inven-id="last-attack" data-inven-attr-for="last-attack-all" data-inven-text="마격" style="width:80px;height:80px;border:10px #4F2F1C solid;border-radius:40px;transition:box-shadow 0.3s, color 0.3s;display:block;background-image:url('https://static.inven.co.kr/image_2011/hs/dataninfo/card/icon64/WoW_Chi_061_D.jpg?v=22611');background-size:cover;box-sizing:border-box;color:transparent;font-size:20px;font-weight:bold;" data-inven-over-css="{'_SELF_':{'color':'#fff','box-shadow':'0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #228DFF, 0 0 14px #228DFF, 0 0 16px #228DFF, 0 0 20px #228DFF, 0 0 30px #228DFF'}}" data-inven-out-css="{'_SELF_':{'color':'transparent','box-shadow':''}}"> </span> </div> <div style="width:100%;height:20px;margin-top:10px;clear:both;float:left;text-align:center;background-color:rgba(255,255,255,0.7);border:1px black solid;box-sizing:border-box;font-weight:bold;font-size:14px;line-height:20px;">초상화를 클릭하면 감정표현을 할 수 있습니다.</div> </div>
EXP
75,078
(61%)
/ 77,001
솔라리어스
|