css3制作商品展示

raise_yang 发布于2019-04-23 11:54 / 2048人阅读

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

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

云服务器 GPU云服务器 css3 css3气泡 css3动画 JS+CSS3

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

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

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

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

abson 2019-08-29 11:14 评论0 收藏0
作为前端开发，如何写好一个简历

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

KunMinX 2019-08-22 10:36 评论0 收藏0
用impress.js制作幻灯片

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

noONE 2019-08-21 12:15 评论0 收藏0
CSS 3D Panorama（全景） - 淘宝造物节技术剖析

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

LiuRhoRamen 2019-08-29 11:16 评论0 收藏0