Follow Widget with Folding CSS3 Animation

Developer
Marius Balaj
Size
2,448 Kb
Views
54,648
  1. Follow Widget with Folding CSS3 Animation Previews
  2. Follow Widget with Folding CSS3 Animation HTML Codes
  3. Follow Widget with Folding CSS3 Animation CSS Codes

How do I make an follow widget with folding css3 animation?

Follow Widget with Folding CSS3 Animation. What is a follow widget with folding css3 animation? How do you make a follow widget with folding css3 animation? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Follow Widget with Folding CSS3 Animation Previews
IQ Test

Follow Widget with Folding CSS3 Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Follow Widget with Folding CSS3 Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="profile-container unfold">
<div class="profile">
<div class="avatar"><img src="//i.imgur.com/L1rfQG5.jpg" /></div>
<div class="follow"><button><i class="icon-plus"></i> Follow</button></div>
</div>
<ul class="profile-list">
<li class="first"><i class="icon-user"></i> Profile</li>
<li class="second"><i class="icon-list-alt"></i> Activity</li>
<li class="third"><i class="icon-time"></i> Timeline</li>
<li class="fourth"><i class="icon-heart"></i> Favorites</li>
</ul>
</div>
</div>
</body>
</html>

Follow Widget with Folding CSS3 Animation - Script Codes CSS Codes

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html { background: #d7d9d9;
}
*, html, body { font-family: Open Sans;
}
ul, li { margin: 0; padding: 0; list-style-type: none;
}
.container { margin: 40px auto 0; width: 143px;
}
.profile-container { position: relative; width: 143px; float: left;
}
.profile { background: #f6f6f6; float: left; padding: 4px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.avatar img { display: block; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
.follow { margin: 4px 0 0 0;
}
.follow button { display: block; width: 100%; border: 0; background: #268cde; color: white; padding: 7px 0; margin: 0; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer;
}
.follow button i { font-size: 10px; color: #b9daf4;
}
.follow button:hover { background: #3096e8;
}
.follow button:active { background: #2085d6;
}
.profile-list { overflow: hidden; width: 100%; box-sizing: border-box; color: #767b7e; font-size: 13px;
}
.profile-list li { cursor: pointer; background: #ffffff; border-top: 1px solid #e5e6e6; padding: 15px 10px;
}
.profile-list li:last-child { border-radius: 0 0 3px 3px;; -o-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px;
}
.profile-list li [class^="icon-"] { margin: 0 3px 0 0;
}
.profile-list .profile { border-radius: 3px 3px 0 0; position: relative;
}
.profile-list li { -webkit-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: perspective(250px) rotateX(-90deg); -o-transform: perspective(250px) rotateX(-90deg); transform: perspective(250px) rotateX(-90deg); -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.profile-list .first { -webkit-transition: 0.2s linear 0.8s; -o-transition: 0.2s linear 0.8s; transition: 0.2s linear 0.8s;
}
.profile-list .second { -webkit-transition: 0.2s linear 0.6s; -o-transition: 0.2s linear 0.6s; transition: 0.2s linear 0.6s;
}
.profile-list .third { -webkit-transition: 0.2s linear 0.4s; -o-transition: 0.2s linear 0.4s; transition: 0.2s linear 0.4s;
}
.profile-list .fourth { -webkit-transition: 0.2s linear 0.2s; -o-transition: 0.2s linear 0.2s; transition: 0.2s linear 0.2s;
}
.profile-container:hover .profile { border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0;
}
.profile-container:hover .profile-list li { -webkit-transform: perspective(350px) rotateX(0deg); -o-transform: perspective(350px) rotateX(0deg); transform: perspective(350px) rotateX(0deg); -webkit-transition: 0.2s linear 0s; -o-transition: 0.2s linear 0s; transition: 0.2s linear 0s;
}
.profile-container:hover .profile-list .second { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;
}
.profile-container:hover .profile-list .third { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;
}
.profile-container:hover .profile-list .fourth { transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;
}
Follow Widget with Folding CSS3 Animation - Script Codes
Follow Widget with Folding CSS3 Animation - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4.5
Size 2,448 Kb
Views 54,648
Do you need developer help for Follow Widget with Folding CSS3 Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marius Balaj (mariusbalaj) Script Codes
Name
Social Buttons v2
Symphony of Math.PI
Pythagorean theorem animation
Social buttons with hover
Flat iPhone with Next Post Animation
Login with flip 3d animation
One element Vinyl
Adi.js
Social Buttons Slide
Apple TV poster
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!