skip
Wednesday , February 1 2023

CSS swing Effect Code

CSS swing Effect Code

<style>
.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
.swing img {
    border: 5px solid #f8f8f8;
    display: block;
}
.swing:after{
    content: ”;
    position: absolute;  
    width: 20px; height: 20px;  
    border: 1px solid #999;
    top: -10px; left: 50%;
    z-index: 0;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    content: ”;
    position: absolute;
    width: 5px; height: 5px;
    top: -14px;left: 54%;
    z-index: 5;
    border-radius: 50% 50%;
    background: #000;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
</style>

<figure class=”swing”>
  <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg/687px-Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg” width=”200″ />
</figure>

preview of CSS swing effect – click here

Simple Swing Notification Bell

CSS Code

<style>
.swing {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    float:left;
}
.swing:after{
    position: absolute;  
    top: -10px; left: 50%;
    transform: rotate(45deg);
}
/* nail */
.swing:before{
    position: absolute;
    top: -14px;left: 54%;
}
 
@keyframes swing {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
</style>

HTML Code:

<figure class=”swing”>
  <img src=”https://1.bp.blogspot.com/-WW-2jVqOHho/YIR1v0BMnLI/AAAAAAAAJRQ/rcr2OMLAssAcpedcdQPujqZNtpuuG74TwCLcBGAsYHQ/s232/free-resume-template-follow-button.png” width=”50″ />
</figure>

Live Preview

Check Also

How to Create a New Widget Section in Blogger Template Layout

New Widget Section in Blogger Template Layout  To add a new section in Blogger template …

Pure Css Notification Bell Hover – NO Java Script Required

How To Make Css Notification Bell Hover ? without any Java Script Here is two …

Start Countdown When I Click On Download Button Full Coding

Start Countdown When I Click On Download Button 100% Working You can use this code …

Responsive Bottom Sticky Footer Ads For Blogger or WordPress

Responsive Bottom Sticky Footer Ads Widget For Blogger or WordPress How Set up Sticky Footer …

Star Symbols Name HTML and CSS Code – HTML Symbols, Entities and Codes

Star Symbols HTML Code , CSS Code Name And Description Need the copyright sign hypertext …

How To Make Left Fixed Ads Section For Desktop Preview Only – Full Guideline

How To Include Left Fixed Ads Section For Desktop Preview For Blogger Or WordPress Site. …

How To Make A Slider By Using CSS – Full Guideline

What is CSS coding ?  CSS stands for Cascading Style Sheets. It is the coding …

Hide Navbar When Scroll Down丨Show Navbar When Scroll Top

How to hide a navbar when the user starts to scroll down ? Just using …

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
একজন লেখক হিসেবে এই সাইটে জয়েন করতে চান ?
আপনার লেখা পোষ্ট পাবলিশ করুন এবং সেই পোষ্ট থেকে অর্থ উপার্জন করুন
See More & Sign Up !