mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
103 lines
3.3 KiB
HTML
103 lines
3.3 KiB
HTML
<div class="notification"> <div class="txt"> Mission passed! <div class="lvl"> 10</div> </div> <button class="ff3"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15.4695 11.2929C15.0789 10.9024 14.4458 10.9024 14.0553 11.2929C13.6647 11.6834 13.6647 12.3166 14.0553 12.7071C14.4458 13.0976 15.0789 13.0976 15.4695 12.7071C15.86 12.3166 15.86 11.6834 15.4695 11.2929Z" fill="currentColor"></path>
|
|
<path d="M16.1766 9.17156C16.5671 8.78103 17.2003 8.78103 17.5908 9.17156C17.9813 9.56208 17.9813 10.1952 17.5908 10.5858C17.2003 10.9763 16.5671 10.9763 16.1766 10.5858C15.7861 10.1952 15.7861 9.56208 16.1766 9.17156Z" fill="currentColor"></path>
|
|
<path d="M19.7121 11.2929C19.3216 10.9024 18.6885 10.9024 18.2979 11.2929C17.9074 11.6834 17.9074 12.3166 18.2979 12.7071C18.6885 13.0976 19.3216 13.0976 19.7121 12.7071C20.1027 12.3166 20.1027 11.6834 19.7121 11.2929Z" fill="currentColor"></path>
|
|
<path d="M16.1766 13.4142C16.5671 13.0237 17.2003 13.0237 17.5908 13.4142C17.9813 13.8048 17.9813 14.4379 17.5908 14.8284C17.2003 15.219 16.5671 15.219 16.1766 14.8284C15.7861 14.4379 15.7861 13.8048 16.1766 13.4142Z" fill="currentColor"></path>
|
|
<path d="M6 13H4V11H6V9H8V11H10V13H8V15H6V13Z" fill="currentColor"></path>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C3.13401 5 0 8.13401 0 12C0 15.866 3.13401 19 7 19H17C20.866 19 24 15.866 24 12C24 8.13401 20.866 5 17 5H7ZM17 7H7C4.23858 7 2 9.23858 2 12C2 14.7614 4.23858 17 7 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7Z" fill="currentColor"></path>
|
|
</svg> Next </button> </div>
|
|
<style>
|
|
/* From Uiverse.io by Fujitawa - Tags: notification */
|
|
.notification {
|
|
width: 250px;
|
|
height: 60px;
|
|
color: black;
|
|
background: white;
|
|
border-radius: 3px;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
align-items: center;
|
|
justify-items: center;
|
|
-webkit-animation-name: pulse;
|
|
animation-name: pulse;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
animation-iteration-count: infinite;
|
|
border: 3px solid #ece0b4;
|
|
}
|
|
|
|
.notification:hover button.ff3 {
|
|
background-color: #f4e0a6;
|
|
}
|
|
|
|
.notification:hover {
|
|
border-color: #f4e0a6;
|
|
}
|
|
|
|
.notification:hover .lvl {
|
|
border-color: #f4e0a6;
|
|
}
|
|
|
|
button.ff3 {
|
|
background-color: #ece0b4;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
cursor: pointer;
|
|
border: 0;
|
|
transition: .5s;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lvl {
|
|
background: white;
|
|
padding: 6px;
|
|
border-radius: 100px;
|
|
border: 3px solid #ece0b4;
|
|
position: absolute;
|
|
left: -10px;
|
|
transform: scale(.8);
|
|
top: -10px;
|
|
}
|
|
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform: scale3d(1.05, 1.05, 1.05);
|
|
transform: scale3d(1.05, 1.05, 1.05);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale3d(1, 1, 1);
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
</style>
|