2. 程式人生 > >CSS3制作美麗的3D表單

CSS3制作美麗的3D表單

阿新 • • 發佈：2017-08-13
for post hit add div webkit size secure font-face

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3制作3D表單</title>
<style type="text/css">
body{
background-color:#f7f0da;
background-image: -webkit-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
background-image: -moz-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
background-image: -o-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
background-image: -ms-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
background-image: linear-gradient(180deg,transparent 90%,#eae4cf 10%);
background-size: 5px 50px;
}
.box{
margin:20px auto;
width:560px;
text-align:center;
font-weight:bold;
}
.box div:first-child{
font-size:60px;
margin-bottom:20px;
text-shadow:0 2px 0 #c0c0c0,0 3px #979385;
}
.box .input_control{

position:relative;
height:100px;
}
.box input{
position:relative;
font-size:18px;
height:56px;
width:100%;
padding-left:10px;
border:12px solid #fff;
border-radius:3px;
box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,2px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.box label{
position:absolute;
top:-2px;
right:50px;
width:74px;
height: 56px;
color:#f3f2f1;
text-shadow:0 3px 1px #9e2719;
border:1px solid #dd684f;
background:-webkit-linear-gradient(top,#e78d7b 0,#dd684f 72px);
background:-moz-linear-gradient(top,#e78d7b 0,#dd684f 72px);
background:-o-linear-gradient(top,#e78d7b 0,#dd684f 72px);
background:-ms-linear-gradient(top,#e78d7b 0,#dd684f 72px);
background:linear-gradient(top,#e78d7b 0,#dd684f 72px);
box-shadow:0 14px 0 #9c2912,0 0 5px rgba(0,0,0,.3);
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.box label:after{
position:absolute;
display:block;
width: 74px;
text-align: center;
font: normal normal 30px/56px ‘icomoon‘;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.input_control:nth-of-type(2) label:after{
content:"\21";
}
.input_control:nth-of-type(3) label:after{
content:"\22";
}
.input_control:nth-of-type(4) label:after{
content:"\23";
}
.box input:focus{
outline: 0 none;
top:2px;
box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,1px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);
}
.box input:focus + label{
top:0;
}
::-webkit-input-placeholder {
color:#d94a2d;
font-style:italic;
}
.box .btn{
position:relative;
width:210px;
height:60px;
color:#4c6e03;
font:bold 35px "Impact";
text-indent:10px;
letter-spacing:3px;
text-align:left;
margin-bottom:20px;
border:none;
border-radius:6px;
text-shadow:-1px 2px 0 #c4e184;
box-shadow:1px 2px 0 #5f8214,-1px 2px 0 #5f8214,2px 3px 0 #5f8214,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #304601,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);
background:-webkit-linear-gradient(top,#c5e185,#a5c65c);
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.box .btn:after{
position:absolute;
display:block;
content:"\25";
width:36px;
height:36px;
border-radius:18px;
background:#5f8214;
top:10px;
right:20px;
text-indent:5px;
text-align:center;
color:#b3d36e;
text-shadow:0 3px 0 #325207;
box-shadow:inset 0 6px 0 #325207;
font: normal normal 18px/40px ‘icomoon‘;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.box .btn:hover{
background:-webkit-linear-gradient(top,#a2c452,#a5c65c);
background:-moz-linear-gradient(top,#a2c452,#a5c65c);
background:-ms-linear-gradient(top,#a2c452,#a5c65c);
background:-o-linear-gradient(top,#a2c452,#a5c65c);
background:linear-gradient(top,#a2c452,#a5c65c);
}
.box .btn:active{
top:2px;
box-shadow:1px 2px 0 #a5c65c,-1px 2px 0 #a5c65c,1px 3px 0 #a5c65c,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #5f8214,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);
}
.box p a{
color:#d94a2d;
line-height:30px;
font-size:14px;
}
@font-face {
font-family: ‘icomoon‘;
src:url(‘fonts/icomoon.eot‘);
src:url(‘fonts/icomoon.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘fonts/icomoon.svg#icomoon‘) format(‘svg‘),
url(‘fonts/icomoon.woff‘) format(‘woff‘),
url(‘fonts/icomoon.ttf‘) format(‘truetype‘);
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div class="page">
<section class="demo">


<div class="box">
<form>
<div>secure login</div>
<div class="input_control">
<input type="text" id="inputName" placeholder="Your Name">
<label for="inputName"></label>
</div>
<div class="input_control">
<input type="text" id="inputEmail" placeholder="Your Email">
<label for="inputName"></label>
</div>
<div class="input_control">
<input type="password" id="inputPassword" placeholder="******">
<label for="inputName"></label>
</div>
<div>
<button type="submit" class="btn">LOGIN</button>
</div>
</form>
</div>

</section>
</div>
</body>
</html>

CSS3制作美麗的3D表單

相關推薦

CSS3制作美麗的3D表單

for post hit add div webkit size secure font-face <!DOCTYPE HTML> <html lang="en-US"> <head> <meta

純css制作學生入學表單

制作 device size tle char color function att idt 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

解析：用 CSS3 和 JavaScript 制作徑向動畫菜單

select webkit on() making 它的 text tran 表示 har 原作者的解析（英文）：http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript

使用css3制作正方形、三角形、扇形和餅狀圖

radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形 如果將盒容器的width和height設置為0，並為每條邊設置一個較粗的width值和彼此不同的顏色，最終會得到四個被拼接在一起三角形，它們分別指向不同的顏色。 htm

使用css3 制作switch開關

rop str one 選擇器 ng- eee ota 1-1 checkbox 本片文章將簡單的采用input[type=checkbox]跟css3來實現switch開關的效果,效果圖如下： html代碼： <div class="bg_con">

css3 制作簡易MacBook Air

auto n+2 5% itl 鍵盤 wid 新特性 style key 這個在實際工作中用處不是很大，（制作自定義鍵盤可能會有用...）只是為了練習一些css新特性，利用這些新特性可以做出一些好看的視覺效果，對初學者的學習和應用將起到事半功倍的作用。 <!DOCT

純CSS3制作圓形進度條所遇到的問題

order 我們 消失 樣式 近日 內部 右上角 圓形進度 spa 　　近日在開發的頁面中，需要制作一個動態的圓形進度條，首先想到的是利用兩個矩形，寬等於直徑的一半，高等於直徑，兩個矩形利用浮動貼在一起，設置overflow：hidden屬性，作為盒子，內部有一個與其寬高相

使用css3制作簡單的loading效果

-o frame mov height document load charset key bottom <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

使用css3制作照片墻

dex eve posit for adding lin 照片墻 ans class <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title

利用css+原生js制作簡易鐘表

相對 function shee 星期 函數 alt 微軟雅黑 spa ctype 利用css+原生js制作簡單的鐘表。效果如下所示 實現該效果，分三大塊：html、javascript、css html部分html部分比較簡單，定義一個clock的div，內部有原點、

css用hover制作下拉菜單

ctype 內容 彈出菜單 hidden ima bsp alt post 積分 首先我們的需求就是 制作一個鼠標移動到某個區域就會有下拉菜單的彈出,這樣會有更多的子類內容,示例代碼如下: <!DOCTYPE html> <html lang="en"&

web前端小案例-css3制作瀏覽器背景漸變背

JavaScript 前端 css3 案例 知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。 css代碼： <style> *{margin:0;padding:0;}

web前端炫酷特效-CSS3制作環形星星發光動畫

前端 源碼 特效 css3 html源碼： <div><div></div></div> <div><div></div></div> <div><div

CSS3——制作帶動畫效果的小圖片

技術分享 margin OS div IV hidden pan ali body 還挺有意思的，但是我沒有截取動畫的軟件，就沒辦法展示我的小動圖了，暫時放一個靜態的吧： main.html <!DOCTYPE html> <html lang="en

CSS3——制作圖片翻頁的小動畫

動畫 意思 樣式 con tez ati -c all spa 覺得還挺有意思的嘻嘻~ 這裏有一個問題要註意一下，圖片反轉過程中可能會遇到一種如下所示的跳變bug： 這玩意一出來嚇我一大跳，顯然這種用戶體驗是很不好的，解決方法： 在.pic, .info{...}這個樣式

利用CSS3制作網頁動畫

tro col 關鍵幀 網頁 style 旋轉 tex str nbsp CSS3變形 　　 　translate()平移函數 　　 　scale()縮放函數 　　 　skew()傾斜函數 　　 　rotate()旋轉函數 　　 CSS3過渡 　　 　過渡屬性 　　 　過渡

第九章 利用CSS3制作網頁動畫

關鍵幀 屬性 平移 ID 位移 ide 效果 速度 style 一.CSS3變形 CSS3變形是一些效果的集合 如平移、旋轉、縮放、傾斜效果 每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化 二.CS

css3制作網頁動畫

單位 長度 使用 練習 PE 變化 次數 text form 一.CSS3變形 CSS3變形是一些效果的集合 如平移、旋轉、縮放、傾斜效果 每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化 二.CSS3位移

環形文字 + css3制作圖形 + animation無限正反旋轉的一個小demo

動畫 sele script javascrip tns -c 天下 fin create 少啰嗦，先看效果圖： （註意文字和太極圖均可旋轉，太極圖使用css寫成的！） css： /*太極圖css--*/ .Taiji { margin: 100px; width: 1

css3 制作平滑過度動畫

.org active 懸停 -s text 單擊 follow 動作 表示 -webkit-transition(屬性漸變) -webkit-transition：CSS屬性(none|all|屬性) 持續時間 時間函數 延遲時間 CSS屬性(transitio