Spin
How do I make an spin?
A very simple Slot Machine.. What is a spin? How do you make a spin? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.
Spin Previews
Spin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spin</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .main { width: 310px;
}
.slots { font-size: 100px; line-height: 100px; font-family: arial,helvetica,sans-serif; text-align: center; overflow: hidden; height: 100px; float: left; border: 1px solid #ccc; background-color: #fff; position: relative;
}
.number-wrapper { margin-top: 0; width: 100px;
}
.number-wrapper:after, .number-wrapper:before { content: " "; display: block; height: 50px; left: 0; position: absolute; width: 100%;
}
.number-wrapper:after { bottom: 0; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.number-wrapper:before { top: 0; background: #cccccc; background: -moz-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, #cccccc 0%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
}
input { background: #5CCD00; background: -moz-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CCD00), color-stop(100%, #4AA400)); background: -webkit-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -o-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -ms-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: linear-gradient(to bottom, #5ccd00 0%, #4aa400 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0); padding: 10px 15px; color: #fff; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #459A00; margin-left: 10px; margin-top: 0;
}
input:hover { cursor: pointer;
}
.button { float: left;
}
/* Mixins */
@-moz-keyframes spin /* Firefox */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-webkit-keyframes spin /* Safari and Chrome */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-ms-keyframes spin /* IE */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-o-keyframes spin /* Opera */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@keyframes spin { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
#equation { position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -80px;
}
#equation span { display: inline-block; vertical-align: middle; margin-right: 12px;
}
#equation .spinner { height: 140px; margin: 10px; margin-right: 12px; background-color: #FFF; background-position: 0; border-radius: 5px; box-shadow: inset 0 0 5px #000; position: relative; -webkit-animation: spin 3s linear 0s infinite; -moz-animation: spin 3s linear 0s infinite; -o-animation: spin 3s linear 0s infinite; -ms-animation: spin 3s linear 0s infinite; animation: spin 3s linear 0s infinite;
}
#equation .spinner:before { content: ''; position: absolute; z-index: -1; top: -10px; left: -10px; width: 120px; height: 160px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#equation .drink { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); width: 80px; background-size: 80px auto; background-position: 0, 0 20px;
}
#equation .drink:before { width: 100px;
}
#equation.zero .drink { background-position: 0, 0 -1580px;
}
#equation.one .drink { background-position: 0, 0 -1680px;
}
#equation.two .drink { background-position: 0, 0 -1780px;
}
#equation.three .drink { background-position: 0, 0 -1880px;
}
#equation.four .drink { background-position: 0, 0 -1980px;
}
#equation.five .drink { background-position: 0, 0 -2080px;
}
#equation.six .drink { background-position: 0, 0 -2180px;
}
#equation.seven .drink { background-position: 0, 0 -2280px;
}
#equation.done .spinner { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; -webkit-transition: background-position 2s ease-out 0s; -moz-transition: background-position 2s ease-out 0s; -o-transition: background-position 2s ease-out 0s; -ms-transition: background-position 2s ease-out 0s; transition: background-position 2s ease-out 0s;
}
#shoulder { position: absolute; top: 30px; left: -100px; width: 80px; height: 100px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#arm { position: relative; top: 10px; left: 10px; cursor: pointer; width: 60px; height: 80px; border-radius: 10% / 50%; background-color: #666; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -moz-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -ms-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -o-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%);
}
#arm:before { content: ''; position: absolute; top: -40px; left: 16px; width: 16px; height: 70px; border-radius: 8px; box-shadow: 0px 2px 0px #333; background-color: #999; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); background-image: -webkit-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -moz-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -ms-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -o-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: linear-gradient(to right, #666666 0%, rgba(255, 255, 255, 0.7) 50%, #666666 100%); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm:after { content: ''; position: absolute; top: -70px; left: -4px; width: 40px; height: 40px; border-radius: 100%; background-color: #760209; border: 2px solid #5d0207; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -moz-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -ms-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:before { top: -20px; left: 20px; -webkit-transform: rotate3d(100, 10, 0, 180deg); -moz-transform: rotate3d(100, 10, 0, 180deg); transform: rotate3d(100, 10, 0, 180deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:after { top: 90px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main"> <!-- Slots --> <div class="numbers"> <div class="slots" id="slots_tens"> <div class="number-wrapper"></div> </div> <div class="slots" id="slots_units"> <div class="number-wrapper"></div> </div> </div>
</div>
<div class="button"> <!--<input type="button" value="spin!" onClick="go(Math.floor(Math.random() * 10),Math.floor(Math.random() * 10));">--> <div id="equation" class="done"> <div id="shoulder"><div id="arm"></div></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://kirkjerk.com/m/files/jquery.easing.1.3.js'></script> <script src="js/index.js"></script>
</body>
</html>
Spin - Script Codes CSS Codes
.main { width: 310px;
}
.slots { font-size: 100px; line-height: 100px; font-family: arial,helvetica,sans-serif; text-align: center; overflow: hidden; height: 100px; float: left; border: 1px solid #ccc; background-color: #fff; position: relative;
}
.number-wrapper { margin-top: 0; width: 100px;
}
.number-wrapper:after, .number-wrapper:before { content: " "; display: block; height: 50px; left: 0; position: absolute; width: 100%;
}
.number-wrapper:after { bottom: 0; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #cccccc 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #cccccc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0 );
}
.number-wrapper:before { top: 0; background: #cccccc; background: -moz-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, #cccccc 0%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
}
input { background: #5CCD00; background: -moz-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CCD00), color-stop(100%, #4AA400)); background: -webkit-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -o-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: -ms-linear-gradient(top, #5CCD00 0%, #4AA400 100%); background: linear-gradient(to bottom, #5ccd00 0%, #4aa400 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0); padding: 10px 15px; color: #fff; font-family: 'Helvetica Neue',sans-serif; font-size: 16px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #459A00; margin-left: 10px; margin-top: 0;
}
input:hover { cursor: pointer;
}
.button { float: left;
}
/* Mixins */
@-moz-keyframes spin /* Firefox */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-webkit-keyframes spin /* Safari and Chrome */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-ms-keyframes spin /* IE */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@-o-keyframes spin /* Opera */ { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
@keyframes spin { from { background-position: 0, 0 0; } to { background-position: 0, 0 -1580px; }
}
#equation { position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -80px;
}
#equation span { display: inline-block; vertical-align: middle; margin-right: 12px;
}
#equation .spinner { height: 140px; margin: 10px; margin-right: 12px; background-color: #FFF; background-position: 0; border-radius: 5px; box-shadow: inset 0 0 5px #000; position: relative; -webkit-animation: spin 3s linear 0s infinite; -moz-animation: spin 3s linear 0s infinite; -o-animation: spin 3s linear 0s infinite; -ms-animation: spin 3s linear 0s infinite; animation: spin 3s linear 0s infinite;
}
#equation .spinner:before { content: ''; position: absolute; z-index: -1; top: -10px; left: -10px; width: 120px; height: 160px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#equation .drink { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.6) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.6) 100%), url("http://media.balsamiq.com/img/hashtaghot/drinks.jpg"); width: 80px; background-size: 80px auto; background-position: 0, 0 20px;
}
#equation .drink:before { width: 100px;
}
#equation.zero .drink { background-position: 0, 0 -1580px;
}
#equation.one .drink { background-position: 0, 0 -1680px;
}
#equation.two .drink { background-position: 0, 0 -1780px;
}
#equation.three .drink { background-position: 0, 0 -1880px;
}
#equation.four .drink { background-position: 0, 0 -1980px;
}
#equation.five .drink { background-position: 0, 0 -2080px;
}
#equation.six .drink { background-position: 0, 0 -2180px;
}
#equation.seven .drink { background-position: 0, 0 -2280px;
}
#equation.done .spinner { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; -webkit-transition: background-position 2s ease-out 0s; -moz-transition: background-position 2s ease-out 0s; -o-transition: background-position 2s ease-out 0s; -ms-transition: background-position 2s ease-out 0s; transition: background-position 2s ease-out 0s;
}
#shoulder { position: absolute; top: 30px; left: -100px; width: 80px; height: 100px; border-radius: 10px; background-color: #333; background-image: -webkit-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -moz-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -ms-linear-gradient(#666 0%, #333 60%, #666 100%); background-image: -o-linear-gradient(#666 0%, #333 60%, #666 100%); box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.2);
}
#arm { position: relative; top: 10px; left: 10px; cursor: pointer; width: 60px; height: 80px; border-radius: 10% / 50%; background-color: #666; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -moz-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -ms-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, transparent 15%, rgba(255, 255, 255, 0) 50%, transparent 85%, rgba(0, 0, 0, 0.3)), -o-linear-gradient(top, #333 0%, #666 10%, #999 30%, rgba(255, 255, 255, 0.8) 60%, #999 70%, #666 90%, #333 100%);
}
#arm:before { content: ''; position: absolute; top: -40px; left: 16px; width: 16px; height: 70px; border-radius: 8px; box-shadow: 0px 2px 0px #333; background-color: #999; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); background-image: -webkit-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -moz-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -ms-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: -o-linear-gradient(left, #666 0%, rgba(255, 255, 255, 0.7) 50%, #666 100%); background-image: linear-gradient(to right, #666666 0%, rgba(255, 255, 255, 0.7) 50%, #666666 100%); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm:after { content: ''; position: absolute; top: -70px; left: -4px; width: 40px; height: 40px; border-radius: 100%; background-color: #760209; border: 2px solid #5d0207; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: -webkit-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -moz-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -ms-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-radial-gradient(50% 40%, closest-corner, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:before { top: -20px; left: 20px; -webkit-transform: rotate3d(100, 10, 0, 180deg); -moz-transform: rotate3d(100, 10, 0, 180deg); transform: rotate3d(100, 10, 0, 180deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
#arm.clicked:after { top: 90px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;
}
Spin - Script Codes JS Codes
/*
*
* jQuery Slot Machine
*
*/
var height_slot_number = '100';
function go(tens,units){ addSlots($("#slots_units .number-wrapper")); addSlots($("#slots_units .number-wrapper")); moveSlots($("#slots_units .number-wrapper"),units); addSlots($("#slots_tens .number-wrapper")); addSlots($("#slots_tens .number-wrapper")); moveSlots($("#slots_tens .number-wrapper"),tens);
}
$(document).ready(function(){ addSlots($("#slots_units .number-wrapper")); addSlots($("#slots_tens .number-wrapper")); $('#arm').click(function(e) { var arm = $(this).addClass('clicked'); delay = setTimeout(function() { arm.removeClass('clicked');}, 500); e.preventDefault(); go(Math.floor(Math.random() * 10),Math.floor(Math.random() * 10)); });
});
function addSlots(jqo){ for(var i = 0; i < 10; i++){ jqo.append("<div class='slot'>"+ i +"</div>"); }
}
function moveSlots(jqo,num){ var time = 6500; var number = num; time += Math.round(Math.random()*1000); jqo.stop(true,true); var num_slot = Math.round((jqo.find('.slot').length)/20); var margin_top = ((num_slot -1) * (height_slot_number * 10)) + (num * height_slot_number); jqo.animate( {"margin-top":"-"+ margin_top +"px"}, {'duration' : time, 'easing' : "easeOutElastic"} );
}
| Developer | El Alemaño |
| Username | elalemanyo |
| Uploaded | November 15, 2022 |
| Rating | 3 |
| Size | 8,262 Kb |
| Views | 18,216 |
Do you need developer help for Spin?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
El Alemaño (elalemanyo) Script Codes
| Name | Size |
| Flexslider Playground | 2,565 Kb |
| Playing with Trianglify | 1,906 Kb |
| Sound Wave Loading Animation | 2,285 Kb |
| Video Scrolling | 2,178 Kb |
| Headline | 1,829 Kb |
| Telefon Ring | 3,749 Kb |
| Now Reading Bubble | 2,254 Kb |
| Highlighttextarea | 2,158 Kb |
| Twitter Loading Animation | 3,209 Kb |
| RGB Loading | 3,210 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Weird glowy CSS3 game | Toneworm | 3,684 Kb |
| Z-index demo | Kblh | 1,534 Kb |
| A Pen by Ben Babics | Benbabics | 2,957 Kb |
| Animated skewed panes | NyX | 4,462 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| Android Logo with HTML and CSS | Wifi | 2,000 Kb |
| Matrix | Stathisnikolaidis | 1,922 Kb |
| PNotify Demo | Adittmar | 1,731 Kb |
| Find The Penguin | Lelder | 2,212 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!