WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von gherhz
1320
gherhz
Im Editor öffnen
Video
Veröffentlichen Sie Ihren Code
0
Empfohlen
15 September 2025
Beispiel für eine CSS-Rasteranimation
30 March 2025
Ein Code von ytr3d3
24 February 2026
Liste der Social-Media-Symbole (HTML-Code)
HTML
Copy
Register
Account Setup
Personal Details
Social Profiles
Create your account
Please fill below
Personal Details
We will never sell it
Social Profiles
Your presence on the social network
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap'); html { height: 100%; } body { margin:0; padding:0; font-family: 'Poppins'!important; background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); overflow: hidden; } .register-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .register-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .register-box .user-box { position: relative; } input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } #msform { text-align: center; position: relative; } #msform fieldset { border: 0 none; padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; position: relative; } #msform fieldset:not(:first-of-type) { display: none; } #msform .action-button { width: 100px; background: #0e65b6; font-weight: bold; color: white; border: 0 none; border-radius: 7px; cursor: pointer; padding: 10px; margin: 10px 5px; text-decoration: none; font-size: 14px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #2575fc; } .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } #progressbar { margin-bottom: 30px; overflow: hidden; counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; } #progressbar li:first-child:after { content: none; } #progressbar li.active:before, #progressbar li.active:after{ background: #2575fc; color: white; }
JS
Copy
var current_fs, next_fs, previous_fs; var left, opacity, scale; var animating; $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); next_fs.show(); current_fs.animate({opacity: 0}, { step: function(now, mx) { scale = 1 - (1 - now) * 0.2; left = (now * 50)+"%"; opacity = 1 - now; current_fs.css({ 'transform': 'scale('+scale+')', 'position': 'absolute' }); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); previous_fs.show(); current_fs.animate({opacity: 0}, { step: function(now, mx) { scale = 0.8 + (1 - now) * 0.2; left = ((1-now) * 50)+"%"; opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, easing: 'easeInOutBack' }); });