ox ox_target interaction icon with animate and colorful
Single Colored
Now You Can replace this Html code to = \ox_target\web\Index.Html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="eye">
<svg id="eyeSvg" xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 448 512" width="36px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>
</div>
<div id="options-wrapper"></div>
<script defer type="module" src="js/main.js"></script>
</body>
</html>
<style>
#eyeSvg {
animation: spin 2s linear infinite, colorchange 1s infinite;
transform-origin: center;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Different colored
You Can Find Here More Styles : Click Here
you can rename the file name to index and paste = \ox_target\web\index.Html
5 Likes
can you do qb-target too ?
Cant wait! Looks really good.
1 Like
Jamazz
June 29, 2023, 10:39am
6
Hi could you do a full black one or a black and white slow for more clean look?
1 Like
sorry for late replay bro check now
How can you change the icon? I know with like qb-target you could change it just with the font awesome name but this one seems to be different. I wanted to set it to " fa-refresh" but I can’t find out how exactly to change it
Oi
WildFyr:
fa-refresh
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="eye">
<svg id="eyeSvg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
</div>
<div id="options-wrapper"></div>
<script defer type="module" src="js/main.js"></script>
</body>
</html>
<style>
#eyeSvg {
animation: spin 2s linear infinite, colorchange 1s infinite;
transform-origin: center;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
Replace this Html To = \ox_target\web\Index.Html
Awesome thanks!
Did you make the qb version of this yet?
hello ,can you do a “fa-hand-pointer-o” ?
1 Like
alexb92
December 29, 2023, 11:02am
16
You can already do this, just pick fontawesome icon and animate it.
1 Like
target
Check here to deferent options
