Add a utility to your UI with Plus Sign Swirl onclick Animation. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
1<div class="container">
2 <svg class="plusSignContainer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"viewBox="0 0 100 100" style="width:50%;height:auto;">
3 <rect height="100" width="100" x="0" y="0" fill="rgba(0,0,0,1)" />
4 <g class="shadow">
5 <g transform="rotate(0,50,50)">
6 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#00ffff" stroke-width="2" />
7 </g>
8 <g transform="rotate(90,50,50)">
9 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#00ffff" stroke-width="2" />
10 </g>
11 <g transform="rotate(180,50,50)">
12 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#00ffff" stroke-width="2" />
13 </g>
14 <g transform="rotate(270,50,50)">
15 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#00ffff" stroke-width="2" />
16 </g>
17 </g>
18 <g class="plusSign">
19 <g transform="rotate(0,50,50)">
20 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#ff00ff" stroke-width="2" />
21 </g>
22 <g transform="rotate(90,50,50)">
23 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#ff00ff" stroke-width="2" />
24 </g>
25 <g transform="rotate(180,50,50)">
26 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#ff00ff" stroke-width="2" />
27 </g>
28 <g transform="rotate(270,50,50)">
29 <path class="leg" d="M50,50 Q50,45,50,40" fill="none" stroke="#ff00ff" stroke-width="2" />
30 </g>
31 </g>
32 </svg>
33</div>
34<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js'></script>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.