CSS/HTML 一個漂亮的使用者註冊(使用者登入)頁面 動態效果
先上效果圖吧
平面泡沫
立體泡沫
之前想做動態泡泡的效果,在網上沒有搜到類似的樣式。所以自己做了一個發上來,給有需要的人蔘考參考。程式碼部分有疑問或者有錯請在評論指出,儘量快點回復。
程式碼部分:(無奈,發程式碼格式一直亂碼)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>register</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font: 16px/20px microsft yahei;
}
.wrap {
width: 100%;
height: 100%;
padding: 10% 0;
position: fixed;
opacity: 0.8;
background: linear-gradient(to bottom right,#000000, #656565);
background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
}
.container {
width: 60%;
margin: 0 auto;
}
.container h1 {
text-align: center;
color: #FFFFFF;
font-weight: 500;
}
.container input {
width: 320px;
display: block;
height: 36px;
border: 0;
outline: 0;
padding: 6px 10px;
line-height: 24px;
margin: 32px auto;
-webkit-transition: all 0s ease-in 0.1ms;
-moz-transition: all 0s ease-in 0.1ms;
transition: all 0s ease-in 0.1ms;
}
.container input[type="text"] , .container input[type="password"] {
background-color: #FFFFFF;
font-size: 16px;
color: #50a3a2;
}
.container input[type='submit'] {
font-size: 16px;
letter-spacing: 2px;
color: #666666;
background-color: #FFFFFF;
}
.container input:focus {
width: 400px;
}
.container input[type='submit']:hover {
cursor: pointer;
width: 400px;
}
.to_login{
color: #a7c4c9;
}
.text{
color: #e2dfe4;
}
.wrap ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -20;
}
.wrap ul li {
list-style-type: none;
display: block;
position: absolute;
bottom: -120px;
width: 15px;
height: 15px;
z-index: -8;
border-radius: 50%;
background-color:rgba(255, 255, 255, 0.15);
animotion: square 25s infinite;
-webkit-animation: square 25s infinite;
}
.wrap ul li:nth-child(1) {
left: 0;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(2) {
width: 40px;
height: 40px;
left: 10%;
animation-duration: 15s;
-moz-animation-duration: 15s;
-o-animation-duration: 15s;
-webkit-animation-duration: 11s;
}
.wrap ul li:nth-child(3) {
left: 20%;
width: 25px;
height: 25px;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(4) {
width: 50px;
height: 50px;
left: 30%;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
animation-duration: 12s;
-moz-animation-duration: 12s;
-o-animation-duration: 12s;
-webkit-animation-duration: 12s;
}
.wrap ul li:nth-child(5) {
width: 60px;
height: 60px;
left: 40%;
animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.wrap ul li:nth-child(6) {
width: 75px;
height: 75px;
left: 50%;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
animation-delay: 7s;
}
.wrap ul li:nth-child(7) {
left: 60%;
width: 30px;
height: 30px;
animation-duration: 8s;
-moz-animation-duration: 8s;
-o-animation-duration: 8s;
-webkit-animation-duration: 8s;
}
.wrap ul li:nth-child(8) {
width: 90px;
height: 90px;
left: 70%;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.wrap ul li:nth-child(9) {
width: 50px;
height: 50px;
left: 80%;
animation-duration: 20s;
-moz-animation-duration: 20s;
-o-animation-duration: 20s;
-webkit-animation-duration: 20s;
}
.wrap ul li:nth-child(10) {
width: 75px;
height: 75px;
left: 90%;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
animation-duration: 30s;
-moz-animation-duration: 30s;
-o-animation-duration: 30s;
-webkit-animation-duration: 30s;
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
100% {
bottom: 400px;
-webkit-transform: translateY(-500);
transform: translateY(-500)
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<h1>Sign up</h1>
<form>
<input type="text" placeholder="Your username"/>
<input type="text" placeholder="Your email"/>
<input type="password" placeholder="password" />
<input type="password" placeholder="Please confirm your password" />
<input type="submit" value="Sign up"/>
<p class="change_link" align="center">
<span class="text">Already a member ?</span>
<a href="login.html" class="to_login"> Go and log in </a>
</p>
</form>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
立體效果的話,在無序列表li增加box-shadow屬性,根據自己需求調整即可。
我把我的發出來
.wrap ul li {list-style-type: none;
display: block;
position: absolute;
bottom: -120px;
width: 15px;
height: 15px;
z-index: -8;
border-radius: 50%;
box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),
inset 0px 0px 5px rgba(0, 0, 0, .5),
inset -3px -3px 5px rgba(0, 0, 0, .5),
0 0 20px rgba(255, 255, 255, .75);
background-color:rgba(255, 255, 255, 0.15);
animotion: square 25s infinite;
-webkit-animation: square 25s infinite;
}
相關推薦
CSS/HTML 一個漂亮的使用者註冊(使用者登入)頁面 動態效果
先上效果圖吧平面泡沫立體泡沫之前想做動態泡泡的效果,在網上沒有搜到類似的樣式。所以自己做了一個發上來,給有需要的人蔘考參考。程式碼部分有疑問或者有錯請在評論指出,儘量快點回復。程式碼部分:(無奈,發程式碼格式一直亂碼)<!DOCTYPE html><html
js學習入門教程筆記:css+html+js使用者註冊程式碼實現
執行截圖:如下: 使用者註冊:結構層:html;表現層:css;行為層:javascript; html利用ul,li來構造: 注意事項:1、每個Input都要有相應的id,這是在js中去呼叫的。 2、<a href
2017.05.12-3 SpringBoot簡單登入註冊-註冊(附原始碼)
並非是那種傳授並分享知識的,只想在個人部落格上把自己學的東西記錄下來,也希望我記錄的東西對各位看官有幫助。 下面是大致的結構目錄跟效果圖 要解釋起來一時半會說不清楚,乾脆就直接偷懶上註冊的程式碼跟原始碼 其實程式碼很少,也很容易理解 pro.xm <pa
SpringBoot簡單登入註冊-註冊(附原始碼)
並非是那種傳授並分享知識的,只想在個人部落格上把自己學的東西記錄下來,也希望我記錄的東西對各位看官有幫助。 下面是大致的結構目錄跟效果圖 要解釋起來一時半會說不清楚,乾脆就直接偷懶上註冊的程式碼跟原始碼 其實程式碼很少,也很容易理解 pro.xm
html特殊字符(css3 content)
字符 class lan ron ffd display lock ont round 由於偶爾用到,又經常忘記,所以把網上的資料考下來記錄一下。 <!DOCTYPE html> <html lang="en"> <head> <
利用jdbc簡單封裝一個小框架(類似DBUtils)
add string url lar conn () 列名 lang con 利用jdbc寫的一個類似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.
css之flex布局 (靈活盒子)
itl lee header pbo 靈活 翻譯 ref .html lex 這裏純當自己的筆記,相看解釋的還是去鏈接吧 打開了新世界的大門 標記一下: 中文,阮一峰的博客,語法:http://www.ruanyifeng.com/blog/2015/07/flex-gra
Zabbix 3.0.X 配置客戶端自動註冊(Auto-Registration)
zabbix auto_registration 自動註冊 一、客戶端配置 1、配置zabbix官方源 [root@node11 ~]# rpm -iUh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabbix-release-3.0-1.el
用裝飾器做一個登陸功能(進階):
read AD OS pos 商城 *args readline wrapper 改變 1 dic = { 2 ‘username‘:None, 3 ‘status‘:False 4 } 5 def login(flag): # 傳入
css多列布局(實例)
text oct spa height back 中間 red 自適應 har 前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <m
enum的一個疑問?(待解決)
sys nbsp com 使用 特點 一行 inf CA 遇到的問題 1、枚舉類介紹 如果一個類的實例是有限且確定的,那麽可以使用枚舉類。比如:季節類,只有春夏秋冬四個實例。 枚舉類使用enum進行創建,其實例必須從”第一行“開始顯示寫出。 enum Season{
從零開始的全棧工程師——html篇1.9(js開篇)
== 客戶端 後臺語言 漢字 .com var 理解 客戶 頁遊 JS開篇 一、js介紹 全稱 javascript 但不是java 他是一門前臺語言 而java是後臺語言js作者 布蘭登·艾奇 前臺語言:運行在客戶端的後臺語言:跟數據庫有關的 能幹什麽? 頁面特效
css-css的基本選擇器(三種)
** 要對哪個標籤裡面的資料進行操作 (1)標籤選擇器 div { background-color:red; color:blue; } (2)class選擇器 * 每個HTML標籤中都有一個屬性 class <div class="h
小白的《CSS權威指南》筆記(下部分)
顏色和背景 顏色 color設定前景色。 前景色 color:<color> | inherit 通過給元素新增class值,然後再通過class選擇器來改變它的顏色。 替換屬性 HTML3.2的BODY屬性:TEXT、LINK、ALINK和VLINK。
小白的《CSS權威指南》筆記(上部分)
前言 書中言道,本書只涉及CSS2.0和CSS2.1的知識(PS:我是想學CSS3才買的書,看來買錯了,沒事,當作複習) CSS的優點 1.豐富的樣式 2.易於使用 3.在多個頁面上使用樣式 4.層疊(也就是選擇器有權重的作用) 5.縮減檔案大小 6.為將來做準備 元素
一個關於對比(參考基因組)的弱智錯誤
一個關於對比(參考基因組)的弱智錯誤 2018年10月25日 23:55:04 生信小白白 閱讀數:19 在重複文章:AKAP95 regulates
css的再深入9(更新中···)
一 單位 1.px 就是一個基本的單位 畫素 2.em 也是一個單位 用父級元素的字型大小乘以em前面的數字。如果父級沒有就繼承上一個父級直到body,如果body沒有那就預設是16px。 3.rem 也是一個單位,只跟根節點<html>的字型大小有關,如果沒有預設是16px。 4.l
CSS中常用中文字型(font-family)的英文名稱
宋體 SimSun 黑體 SimHei 微軟雅黑
純CSS實現立體感圓盤(立體化按鈕),點選有圖
線上編輯:https://codepen.io/sunnercms/ <div class="inner"> <div class="disc"> </div> </div> .inner{ position:relative;
Django 專案總結(3)- 第三方登入(QQ登入)
第三方登入(QQ 登入) 根據 qq 開發文件 oauth2.0 QQ 登入流程: 前端頁面點選 QQ 登入,需要跳轉到 QQ 的登入頁面,但是前端不知道 QQ 的登入連結,所以先想後端傳送請求,由伺服器生成 QQ 登入頁地址,返回給前端; 使用者在