pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|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線性漸變生成加號和減號的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
主站蜘蛛池模板: 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 | 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 南京展台搭建-南京展会设计-南京展览设计公司-南京展厅展示设计-南京汇雅展览工程有限公司 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 机床主轴维修|刀塔维修|C轴维修-常州翔高精密机械有限公司 | 软启动器-上海能曼电气有限公司| 气动球阀_衬氟蝶阀_调节阀_电动截止阀_上海沃托阀门有限公司 | 座椅式升降机_无障碍升降平台_残疾人升降平台-南京明顺机械设备有限公司 | 考勤系统_人事考勤管理系统_本地部署BS考勤系统_考勤软件_天时考勤管理专家 | 碳钢法兰厂家,非标法兰,定制异型,法兰生产厂家-河北九瑞管道 | 工业雾炮机_超细雾炮_远程抑尘射雾器-世纪润德环保设备 | 不锈钢水管-不锈钢燃气管-卫生级不锈钢管件-不锈钢食品级水管-广东双兴新材料集团有限公司 | 视频直播 -摄影摄像-视频拍摄-直播分发 | DAIKIN电磁阀-意大利ATOS电磁阀-上海乾拓贸易有限公司 | 内六角扳手「厂家」-温州市威豪五金工具有限公司| 美能达分光测色仪_爱色丽分光测色仪-苏州方特电子科技有限公司 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 今日热点_实时热点_奇闻异事_趣闻趣事_灵异事件 - 奇闻事件 | 恒湿机_除湿加湿一体机_恒湿净化消毒一体机厂家-杭州英腾电器有限公司 | 丹佛斯变频器-丹佛斯压力开关-变送器-广州市风华机电设备有限公司 | 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 低合金板|安阳低合金板|河南低合金板|高强度板|桥梁板_安阳润兴 北京租车牌|京牌指标租赁|小客车指标出租 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 商标转让-商标注册-商标查询-软著专利服务平台 - 赣江万网 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 宜兴紫砂壶知识分享 - 宜兴壶人 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 实体店商新零售|微赢|波后|波后合作|微赢集团| 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 冷库安装厂家_杭州冷库_保鲜库建设-浙江克冷制冷设备有限公司 | 进口消泡剂-道康宁消泡剂-陶氏消泡剂-大洋消泡剂 | 釜溪印象网络 - Powered by Discuz!|