資訊專欄INFORMATION COLUMN
摘要：今天看到一個用制作的簡單的展示頁面所以，我自己又是初學者所以決定模仿著寫一個，下面右邊是一開始的，右邊是鼠標放上去暫時的。這個是由下到上逐漸顯示的首先直接上代碼。
今天看到一個用css3制作的簡單的展示頁面所以，我自己又是初學者所以決定模仿著寫一個，下面右邊是一開始的，右邊是鼠標放上去暫時的。這個是由下到上逐漸顯示的首先直接上代碼。
?
1 2 DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <link rel="stylesheet" href="./style.css"> 10 <title>Documenttitle> 11 head> 12 13 <body> 14 <div class="box"> 15 <div class="pic"> 16 <img src="./1.jpeg" alt=""> 17 div> 18 <div class="desc"> 19 <div class="title"> 20 <span>立即訂制span> 21 div> 22 <div class="ui"> 23 <p>ui課程設(shè)計p> 24 <p>***人在學習p> 25 div> 26 div> 27 div> 28 body> 29 30 html>
下面是css代碼
* {
padding: 0px;
border: 0px;
}
.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
text-align: center;
}
.pic {
width: 100%;
height: 100%;
}
.pic img {
width: 100%;
height: 100%;
}
.desc {
position: absolute;
bottom: 0px;
width: 100%;
/* width: 0px; */
height: 0px;
overflow: hidden;
text-align: center;
opacity: 0.5;
transition: all 0.6s;
}
.desc .title {
width: 80%;
}
.box:hover .desc{
height: 100%;
width: 100%;
border: 1px solid red;
background-color: black;
}
.box:hover .title{
margin-top: 120px;
}
.desc .title span {
border: 1px solid red;
color: red;
padding-left: 20%;
padding-right: 20%;
margin: 0;
}
.ui p {
float: left;
margin: 10px 10px 0px 30px;
color: white;
}
下面展示我做的，由于是初學所以對與美化不是太好
?
這就是效果了，主要是用了
.box:hover .desc{
height: 100%;
width: 100%;
border: 1px solid red;
background-color: black;
}
同時，你可以直接用bottom,或left或top或right你會發(fā)現(xiàn)這個有不同的效果
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1324.html
摘要：項目地址需求來源通常在各個招聘網(wǎng)站，我們填寫完一些信息后，網(wǎng)站就可以幫助我們生成一個很不錯的簡歷。但是作為一名開發(fā)者，尤其是前端開發(fā)者，可能對這種簡歷并不滿意。，前端開發(fā)神器。最后，為了保護隱私。 背景 前一陣子，閑下來便開始著手做一個一直想做的東西--resume。經(jīng)過幾天業(yè)余時間的折騰，終于做出了一番模樣。Github項目地址：https://github.com/eternity...
摘要：項目地址需求來源通常在各個招聘網(wǎng)站，我們填寫完一些信息后，網(wǎng)站就可以幫助我們生成一個很不錯的簡歷。但是作為一名開發(fā)者，尤其是前端開發(fā)者，可能對這種簡歷并不滿意。，前端開發(fā)神器。最后，為了保護隱私。 背景 前一陣子，閑下來便開始著手做一個一直想做的東西--resume。經(jīng)過幾天業(yè)余時間的折騰，終于做出了一番模樣。Github項目地址：https://github.com/eternity...
摘要：前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片?？梢杂萌缦碌姆椒ㄌ砑拥谝豁摰幕脽羝阈枰獙懙氖呛汀Ｈ绻脩魟傸c開幻燈片而沒反應(yīng)，這個提示會自動浮現(xiàn)。雖然這些東西很簡單，但做一個演講使用的幻燈片，也已經(jīng)足夠好了。 前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個Web幻燈片工具?？戳藥讉€之后，我決定學習一下其中最G...
摘要：淘寶造物節(jié)的活動頁就是全景的一個很贊的頁面，它將全景圖分割成等份，相鄰的元素構(gòu)成的夾角，相鄰兩側(cè)面相對于棱柱中心所構(gòu)成的夾角。 本文轉(zhuǎn)自凹凸實驗室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...
閱讀 2598·2023-04-25 20:50
閱讀 3961·2023-04-25 18:45
閱讀 2231·2021-11-17 17:00
閱讀 3337·2021-10-08 10:05
閱讀 3086·2019-08-30 15:55
閱讀 3503·2019-08-30 15:44
閱讀 2365·2019-08-29 13:51
閱讀 1121·2019-08-29 12:47
