Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdallahabusidu/twitter-love-reaction
https://github.com/abdallahabusidu/twitter-love-reaction
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/abdallahabusidu/twitter-love-reaction
- Owner: abdallahabusidu
- Created: 2020-08-14T00:17:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-14T00:30:54.000Z (over 4 years ago)
- Last Synced: 2025-01-09T21:03:32.193Z (about 1 month ago)
- Language: HTML
- Size: 12.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Twitter Love reaction
this is a simple code that have the animation of the twitter love animation
### 😎 How to make it
first of all make a span that have a class name `heart`
```
```
in the CSS code we will center the container
```
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
then style the heart
- give the image the width
- background image without repeat
- then focus on one part of the image
```
.heart {
float:left;
width: 90px;
height: 90px;
background: url("img.png") no-repeat;
background-size: 2900%;
background-position: left;
}
```
then i make another class of what will happend when i click on the heart
```
.hearts {
background-position: right;
animation: animate 0.8s steps(28) 1;
}
@keyframes animate {
0% {
background-position: left;
}
100% {
background-postion: right;
}
}
```
then i make the script by adding a event listener click then toggle the class name
```
let love = document.getElementById("heart");
love.addEventListener("click", function () {
document.getElementById("heart").classList.toggle("hearts");
});
```
# ScreenShots
