Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved
Seeking references or examples to determine feasibility.
Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved
Seeking references or examples to determine feasibility.
Experience the spinning effect using CSS hover. Although CSS does not support event handlers for adding/removing classes, you can still achieve hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}Hover to visualize effect: <div>Spin</div>If a hint of javascript is acceptable, you could implement something similar to this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to observe:<div>spin</div>Note:
The javascript included here only toggles the 'thisIsAdded' class.
Justinas made a great point that we can't trigger a CSS style on a click event. To achieve this, we would need to use JavaScript. However, it is possible to create a spinning effect using CSS animations with pseudo-selectors.
Here is an example of a spin effect created using only CSS:
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Take a look at this awesome solution: JSFiddle
Here is the CSS code snippet:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...
I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...
Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...
I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...
I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...
Within a parent container, I have a lengthy div. I believe that it needs to be positioned absolutely in order to allow horizontal scrolling. My goal is to only display the portion inside the parent div. I attempted setting overflow: hidden on the parent ...
I've employed the following code snippet to embed my SWF file and redirect it to another page upon clicking: <object type="application/x-shockwave-flash" onmouseup="document.location='http://www.pageopensafterclick.com'" height=50 width= ...
When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...
I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...
I am currently using beautiful soup to extract all the keno numbers that have ever been drawn. While I have a good understanding of how to achieve this, I am encountering an obstacle. My goal is to retrieve both the game numbers and the corresponding winni ...
I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...
I have a challenge - I am storing time in DATETIME format and now I need to display it in the local timezone. Does anyone know how to achieve this using PHP? ...
Currently, I am using the 'IconContext.Provider' tag to style my icons from the 'react-icons' library. Are there any solutions available to dynamically change the size of the icon based on the size of my media? Is using the global styl ...
I have a JSP page with checkboxes. I am trying to retrieve the checkbox values and include them in the data property of an AJAX call. When the AJAX call is made, a div will open displaying the selected checkbox values as follows: fruits: Lichi, Mango H ...
I've been staring at this code for the past two hours and I can't seem to spot the issue. It's probably something simple, as I keep getting an undefined index error, but it's eluding me. Could you please take a look with fresh eyes? He ...
I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...
I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...
Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...
I am curious about something. There is a <div> and a <button> in my code. I am looking to access the inner markup of the <div> within the ng-click function without relying on jQuery. Can you give me some guidance? <div id = text-entry ...
I am trying to achieve a 3D effect on an SVG by adding a light source at the top and left border, and a shadow on the bottom and right border. Here is an example: #div1 { background: #ddd; } #div1, #div2, #div3 { width: 100px; height: 100px; po ...