This content originally appeared on DEV Community and was authored by Lakshmanan Arumugam
Create a own icon icon revealing hover using HTML and CSS.
Animation inspired by google(Sheets).
let start the article. First create a HTML and the the below code.
<section>
<button class="nav-link icono-plus"></button>
<ul class="nav-list">
<li class="nav-list-item"></li>
<li class="nav-list-item"></li>
<li class="nav-list-item"></li>
</ul>
</section>
The above code functionality when ever i have the button I want to show the nav-list-item items with bubble animation.
Button Design:
.nav-link {
font-size: 18px;
width: 36px;
height: 36px;
border-radius: 100%;
border: none;
background-color: #000;
color: #fff;
position: absolute;
top: 0;
z-index: 2;
transition: ease 0.3s;
transform: scale(1) rotate(0deg);
cursor: pointer;
.icono-plus {
font-size: 16px;
text-align: center;
}
}
Dropdown Item design
.nav-list {
list-style:none;
text-align: center;
margin-top: 12px;
position: relative;
&-item{
width: 22px;
height: 22px;
margin: auto;
background-color: #333;
margin-bottom: 8px;
border-radius: 100%;
position: relative;
}
}
On hover animation with full code
section {
width: 40px;
margin: 20px auto;
position: relative;
}
.nav-list {
list-style:none;
text-align: center;
margin-top: 12px;
position: relative;
display: none;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
&-item{
width: 22px;
height: 22px;
margin: auto;
background-color: #fff;
margin-bottom: 8px;
border-radius: 100%;
&:nth-child(1) {
transform: translateY(36px);
animation: icon1 0.5s;
}
&:nth-child(2) {
transform: translateY(40px);
animation: icon2 0.5s;
}
&:nth-child(3) {
transform: translateY(44px);
animation: icon3 0.5s;
}
}
}
.nav-link {
font-size: 18px;
width: 36px;
height: 36px;
border-radius: 100%;
border: none;
background-color: #000;
color: #fff;
z-index: 2;
transition: ease 0.3s;
transform: scale(1) rotate(0deg);
cursor: pointer;
&:hover {
transition: ease 0.3s;
transform: scale(0.9) rotate(45deg);
& ~ .nav-list {
display: block;
}
}
.icono-plus {
font-size: 16px;
text-align: center;
}
}
@keyframes icon1 {
0% {
opacity: 0;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(36px);
}
}
@keyframes icon2 {
0% {
opacity: 0;
transform: translateY(0px);
}
30% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(40px);
}
}
@keyframes icon3 {
0% {
opacity: 0;
transform: translateY(0px);
}
20% {
opacity: 0;
transform: translateY(10px);
}
40% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(44px);
}
}
That's it. Animation ready. refer the below codepen URL for testing.
--
To more content visit my blog website
This content originally appeared on DEV Community and was authored by Lakshmanan Arumugam
Lakshmanan Arumugam | Sciencx (2021-06-08T22:09:36+00:00) Icon revealing hover animation using CSS. Retrieved from https://www.scien.cx/2021/06/08/icon-revealing-hover-animation-using-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.