[기타] '베어폴리스'님의 주사위 굴리기에 디자인을 입혀보았습니다.

주사위
굴리기
1~100

주사위를 굴려
"

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

"
나왔습니다.
다시던지기

 

'베어폴리스'님께서 인벤스크립트로 작성해주신 소스를 토대로

 (원본소스 출처 : http://www.inven.co.kr/board/powerbbs.php?come_idx=4712&l=196 ) 

주사위를 굴리는 듯한 느낌으로 만들어 보았습니다.

소스코드

<div style="width:452px; float:left; padding:5px;height:282px; float:left; background:url('https://upload2.inven.co.kr/upload/2017/08/11/bbs/i14128420821.png') no-repeat;"><div data-inven-id="seal_show" style="width:75%; padding-top:70px; text-align:center; float:right;"><div class="shake-slow"><a href="#" data-inven-show="dice" data-inven-hide="seal_show" style="background:url('https://upload2.inven.co.kr/upload/2017/08/11/bbs/i14146870858.png') no-repeat;color:#fff;text-align:Center; width:115px; height:105px;padding:45px 15px 4px 0px;display:block;cursor:pointer;margin:13px auto;text-decoration:none;">주사위<br>굴리기<br>1~100</a></div></div><div data-inven-id="dice" style="display: none; width: 75%; float: right; text-align: center; padding-top: 70px;"><a href="#" data-inven-random="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" data-inven-show="seal_show" data-inven-hide="dice" style="cursor: pointer; background: url(&quot;https://upload2.inven.co.kr/upload/2017/08/11/bbs/i14146870858.png&quot;) no-repeat; color: rgb(255, 255, 255); text-align: center; width: 115px; height: 115px; padding: 35px 15px 0px 0px; display: block; margin: 18px auto; text-decoration: none;">주사위를 굴려 <br><strong style="dont-weight:bold; font-size:14px;">"<font><div data-inven-id="1" style="display:none;display:inline;">1</div><div data-inven-id="2" style="display:none;display:inline;">2</div><div data-inven-id="3" style="display:none;display:inline;">3</div><div data-inven-id="4" style="display:none;display:inline;">4</div><div data-inven-id="5" style="display:none;display:inline;">5</div><div data-inven-id="6" style="display:none;display:inline;">6</div><div data-inven-id="7" style="display:none;display:inline;">7</div><div data-inven-id="8" style="display:none;display:inline;">8</div><div data-inven-id="9" style="display:none;display:inline;">9</div><div data-inven-id="10" style="display:none;display:inline;">10</div><div data-inven-id="11" style="display:none;display:inline;">11</div><div data-inven-id="12" style="display:none;display:inline;">12</div><div data-inven-id="13" style="display:none;display:inline;">13</div><div data-inven-id="14" style="display:none;display:inline;">14</div><div data-inven-id="15" style="display:none;display:inline;">15</div><div data-inven-id="16" style="display:none;display:inline;">16</div><div data-inven-id="17" style="display:none;display:inline;">17</div><div data-inven-id="18" style="display:none;display:inline;">18</div><div data-inven-id="19" style="display:none;display:inline;">19</div><div data-inven-id="20" style="display:none;display:inline;">20</div><div data-inven-id="21" style="display:none;display:inline;">21</div><div data-inven-id="22" style="display:none;display:inline;">22</div><div data-inven-id="23" style="display:none;display:inline;">23</div><div data-inven-id="24" style="display:none;display:inline;">24</div><div data-inven-id="25" style="display:none;display:inline;">25</div><div data-inven-id="26" style="display:none;display:inline;">26</div><div data-inven-id="27" style="display:none;display:inline;">27</div><div data-inven-id="28" style="display:none;display:inline;">28</div><div data-inven-id="29" style="display:none;display:inline;">29</div><div data-inven-id="30" style="display:none;display:inline;">30</div><div data-inven-id="31" style="display:none;display:inline;">31</div><div data-inven-id="32" style="display:none;display:inline;">32</div><div data-inven-id="33" style="display:none;display:inline;">33</div><div data-inven-id="34" style="display:none;display:inline;">34</div><div data-inven-id="35" style="display:none;display:inline;">35</div><div data-inven-id="36" style="display:none;display:inline;">36</div><div data-inven-id="37" style="display:none;display:inline;">37</div><div data-inven-id="38" style="display:none;display:inline;">38</div><div data-inven-id="39" style="display:none;display:inline;">39</div><div data-inven-id="40" style="display:none;display:inline;">40</div><div data-inven-id="41" style="display:none;display:inline;">41</div><div data-inven-id="42" style="display:none;display:inline;">42</div><div data-inven-id="43" style="display:none;display:inline;">43</div><div data-inven-id="44" style="display:none;display:inline;">44</div><div data-inven-id="45" style="display:none;display:inline;">45</div><div data-inven-id="46" style="display:none;display:inline;">46</div><div data-inven-id="47" style="display:none;display:inline;">47</div><div data-inven-id="48" style="display:none;display:inline;">48</div><div data-inven-id="49" style="display:none;display:inline;">49</div><div data-inven-id="50" style="display:none;display:inline;">50</div><div data-inven-id="51" style="display:none;display:inline;">51</div><div data-inven-id="52" style="display:none;display:inline;">52</div><div data-inven-id="53" style="display:none;display:inline;">53</div><div data-inven-id="54" style="display:none;display:inline;">54</div><div data-inven-id="55" style="display:none;display:inline;">55</div><div data-inven-id="56" style="display:none;display:inline;">56</div><div data-inven-id="57" style="display:none;display:inline;">57</div><div data-inven-id="58" style="display:none;display:inline;">58</div><div data-inven-id="59" style="display:none;display:inline;">59</div><div data-inven-id="60" style="display:none;display:inline;">60</div><div data-inven-id="61" style="display:none;display:inline;">61</div><div data-inven-id="62" style="display:none;display:inline;">62</div><div data-inven-id="63" style="display:none;display:inline;">63</div><div data-inven-id="64" style="display:none;display:inline;">64</div><div data-inven-id="65" style="display:none;display:inline;">65</div><div data-inven-id="66" style="display:none;display:inline;">66</div><div data-inven-id="67" style="display:none;display:inline;">67</div><div data-inven-id="68" style="display:none;display:inline;">68</div><div data-inven-id="69" style="display:none;display:inline;">69</div><div data-inven-id="70" style="display:none;display:inline;">70</div><div data-inven-id="71" style="display:none;display:inline;">71</div><div data-inven-id="72" style="display:none;display:inline;">72</div><div data-inven-id="73" style="display:none;display:inline;">73</div><div data-inven-id="74" style="display:none;display:inline;">74</div><div data-inven-id="75" style="display:none;display:inline;">75</div><div data-inven-id="76" style="display:none;display:inline;">76</div><div data-inven-id="77" style="display:none;display:inline;">77</div><div data-inven-id="78" style="display:none;display:inline;">78</div><div data-inven-id="79" style="display:none;display:inline;">79</div><div data-inven-id="80" style="display:none;display:inline;">80</div><div data-inven-id="81" style="display:none;display:inline;">81</div><div data-inven-id="82" style="display:none;display:inline;">82</div><div data-inven-id="83" style="display:none;display:inline;">83</div><div data-inven-id="84" style="display:none;display:inline;">84</div><div data-inven-id="85" style="display:none;display:inline;">85</div><div data-inven-id="86" style="display:none;display:inline;">86</div><div data-inven-id="87" style="display:none;display:inline;">87</div><div data-inven-id="88" style="display:none;display:inline;">88</div><div data-inven-id="89" style="display:none;display:inline;">89</div><div data-inven-id="90" style="display:none;display:inline;">90</div><div data-inven-id="91" style="display:none;display:inline;">91</div><div data-inven-id="92" style="display:none;display:inline;">92</div><div data-inven-id="93" style="display:none;display:inline;">93</div><div data-inven-id="94" style="display:none;display:inline;">94</div><div data-inven-id="95" style="display:none;display:inline;">95</div><div data-inven-id="96" style="display:none;display:inline;">96</div><div data-inven-id="97" style="display:none;display:inline;">97</div><div data-inven-id="98" style="display:none;display:inline;">98</div><div data-inven-id="99" style="display:none;display:inline;">99</div><div data-inven-id="100" style="display:none;display:inline;">100</div></font> "</strong><br>나왔습니다.<br><u style="margin-top: 2px; width: 100%; display: block; clear: both;"><img src="https://upload2.inven.co.kr/upload/2017/08/11/bbs/i13149753636.png" style=""> 다시던지기</u></a></div></div>