pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网

HTML+CSS實現動態背景登錄頁面

這篇文章主要介紹了HTML+CSS實現動態背景登錄頁面的相關資料,需要的朋友可以參考下

1. 實現背景圖片的動態變換

首先在HTML頁面body板塊中,添加圖片div,代碼如下:

<body>
<div class="bgk">
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/1.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/2.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/3.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/4.jpg')"></div>
</body>

再對圖片進行css設計。你要對圖片進行大小定位,那么以下代碼肯定要首先編寫:

`.bgk {
margin: auto;
position: absolute;
width: 1366px;
height: 672px;
overflow: hidden;   /*溢出部分隱藏*/
}`

位置設定ok以后,那么再對里面的圖片進行設置。為了使圖片能足夠大覆蓋頁面,則代碼必須有 background-size: cover;

要實現動態效果,那么你的css代碼中必須有動畫的設計:

-webkit-animation-name: kenburns;       /*-animation-name:為@keyframes 動畫規定名稱,必須與-animation-duration同時使用,否則無動畫效果*/
animation-name: kenburns;               /*或者:后面值為需要綁定到選擇器上的keyframe名稱*/
-webkit-animation-duration: 16s;    /*定義動畫完成一個周期所需時間*/
animation-duration: 16s;
-webkit-animation-timing-function: linear;  /*規定動畫從頭到尾以相同速度播放,還有其他幾個速度值*/
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;    /*規定動畫播放次數,infinite為無限次*/
animation-iteration-count: infinite;
-webkit-transform: scale(1.2);      /*規定動畫的縮放特效,scale:規定2D縮放*/
transform: scale(1.2);
-webkit-filter: blur(10px);       /*定義圖片的模糊程度,顯示為毛玻璃效果*/
filter: blur(10px);

在綁定每個子元素選擇器,有幾張圖片就綁定幾個選擇器:

.bgk-image:nth-child(1) {
-webkit-animation-name: kenburns-1;       /*選擇器上的名稱*/
animation-name: kenburns-1;
z-index: 3;         /*動畫堆疊順序,值越大表示越先播放,離用戶越近*/
}
.bgk-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.bgk-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.bgk-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4;
z-index: 0;
}

創建好選擇器以后,你就可以預覽你的動態背景圖片變換了

2. 對登錄表單的設計

在之前HTML頁面中繼續添加一個表單

<div class="form_login_div">
    <form  class="form_login" action="" method="post">
        <label class="login_title">登錄您的賬戶</label>
        <label class="username">用戶名</label><input class="input_username" id="input_username" type="text" name="username" placeholder="郵箱/手機號"/>
        <label class="password">密&nbsp;碼</label><input class="input_password" id="input_password" type="password" name="password" placeholder="請輸入密碼"/>
        <input type="submit" value="登錄"/><br/>
    </form>
</div>

添加完表單之后,就要進行表單的樣式設計。首先你得對表單規定一個圈子,限制它的寬度和高度

.form_login{
    margin: auto;
    width:700px;
    height: 480px;
    top: 90px;
    left: 333px;
    position: absolute;
    border-radius: 15px;
    background: rgba(216,216,216,0.5);      /*設置form表單透明度*/
    text-align: center;
    overflow: hidden;
}

然后對表單里面的各個label進行定位和樣式設計,這里可以自由設計。

對輸入框的設計,我只貼出主要樣式代碼

outline:none;       /*outline (輪廓)是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用。*/
border:1px solid rgba(0,0,0,.49);       /*輸入框邊框的大小,實線,rgba(red,green,blue,a為透明度),透明度處于0-1之間*/
-webkit-background-clip: padding-box;   /*background-clip 規定背景的繪制區域,padding-box為內容被裁減到內邊距框*/
background-clip: padding-box;
background:rgba(216,216,216,0.4) ;
border-radius:6px;      /*對輸入框進行圓角*/
padding:7px;       /*輸入框中光標位置*/
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
主站蜘蛛池模板: 天津散热器_天津暖气片_天津安尼威尔散热器制造有限公司 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 磁力抛光研磨机_超声波清洗机厂家_去毛刺设备-中锐达数控 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 智慧水务|智慧供排水利信息化|水厂软硬件系统-上海敢创 | 电抗器-能曼电气-电抗器专业制造商 | TPM咨询,精益生产管理,5S,6S现场管理培训_华谋咨询公司 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 山东集装箱活动房|济南集装箱活动房-济南利森集装箱有限公司 | 光栅尺厂家_数显表维修-苏州泽升精密机械| 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 河南新乡德诚生产厂家主营震动筛,振动筛设备,筛机,塑料震动筛选机 | 烟气在线监测系统_烟气在线监测仪_扬尘检测仪_空气质量监测站「山东风途物联网」 | 翰香原枣子坊加盟费多少钱-正宗枣核糕配方培训利润高飘香 | 国标白水泥,高标号白水泥,白水泥厂家-淄博华雪建材有限公司 | 破碎机_上海破碎机_破碎机设备_破碎机厂家-上海山卓重工机械有限公司 | 一氧化氮泄露报警器,二甲苯浓度超标报警器-郑州汇瑞埔电子技术有限公司 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | PCB设计,PCB抄板,电路板打样,PCBA加工-深圳市宏力捷电子有限公司 | 机床导轨_导轨板_滚轮导轨-上海旻佑精密机械有限公司 | 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 云南丰泰挖掘机修理厂-挖掘机维修,翻新,再制造的大型企业-云南丰泰工程机械维修有限公司 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | 广西教师资格网-广西教师资格证考试网 | 上海租车公司_上海包车_奔驰租赁_上海商务租车_上海谐焕租车 | 预制直埋蒸汽保温管-直埋管道-聚氨酯发泡保温管厂家 - 唐山市吉祥保温工贸有限公司 | 全钢实验台,实验室工作台厂家-无锡市辰之航装饰材料有限公司 | 压滤机滤板_厢式_隔膜_板框压滤机滤板厂家价格型号材质-大凯环保 | 广州展览设计公司_展台设计搭建_展位设计装修公司-众派展览装饰 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 冲锋衣滑雪服厂家-冲锋衣定制工厂-滑雪服加工厂-广东睿牛户外(S-GERT) | 伺服电机_直流伺服_交流伺服_DD马达_拓达官方网站 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 手持式线材张力计-套帽式风量罩-深圳市欧亚精密仪器有限公司 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 |