资讯专栏INFORMATION COLUMN

css3制作商品展示

raise_yang / 2138人阅读

摘要:今天看到一个用制作的简单的展示页面所以,我自己又是初学者所以决定模仿着写一个,下面右边是一开始的,右边是鼠标放上去暂时的。这个是由下到上逐渐显示的首先直接上代码。

今天看到一个用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课程设计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你会发现这个有不同的效果

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1324.html

相关文章

  • 作为前端开发,如何写好一个简历

    摘要:项目地址需求来源通常在各个招聘网站,我们填写完一些信息后,网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者,尤其是前端开发者,可能对这种简历并不满意。,前端开发神器。最后,为了保护隐私。 背景 前一阵子,闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾,终于做出了一番模样。Github项目地址:https://github.com/eternity...

    abson 评论0 收藏0
  • 作为前端开发,如何写好一个简历

    摘要:项目地址需求来源通常在各个招聘网站,我们填写完一些信息后,网站就可以帮助我们生成一个很不错的简历。但是作为一名开发者,尤其是前端开发者,可能对这种简历并不满意。,前端开发神器。最后,为了保护隐私。 背景 前一阵子,闲下来便开始着手做一个一直想做的东西--resume。经过几天业余时间的折腾,终于做出了一番模样。Github项目地址:https://github.com/eternity...

    KunMinX 评论0 收藏0
  • 用impress.js制作幻灯片

    摘要:前两天学长回学校进行洗脑宣讲,做了一个看上去很炫的缩放式幻灯片。可以用如下的方法添加第一页的幻灯片你需要写的是和。如果用户刚点开幻灯片而没反应,这个提示会自动浮现。虽然这些东西很简单,但做一个演讲使用的幻灯片,也已经足够好了。 前两天学长回学校进行洗脑宣讲,做了一个看上去很炫的缩放式幻灯片。我不知道是不是太浅薄了,找了很久才找到几个Web幻灯片工具。看了几个之后,我决定学习一下其中最G...

    noONE 评论0 收藏0
  • CSS 3D Panorama(全景) - 淘宝造物节技术剖析

    摘要:淘宝造物节的活动页就是全景的一个很赞的页面,它将全景图分割成等份,相邻的元素构成的夹角,相邻两侧面相对于棱柱中心所构成的夹角。 本文转自凹凸实验室:https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鲜事物了,但以前...

    LiuRhoRamen 评论0 收藏0

发表评论

0条评论

raise_yang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<