HTML5实现头像的上传

TML5实现头像的上传

这是利用form-data给后台传输数据，来实现头像的上传加载！

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div class="container">
        <input enctype="multipart/form-data" type="file">
        <input id="Susername"  type="text" placeholder="用户名">
        <input id="Ssex" type="number" placeholder="年龄">
        <input id="Sage" type="text" placeholder="专业">
        <input id="Smajor" type="text" placeholder="学校">
        <input id="Sschool" type="text" placeholder="QQ">
        <input id="Sqq" type="text" placeholder="地址">
        <input id="Saddress" type="text" placeholder="座右铭">
        <input id="Smotto" type="button" value="上传">
       
        <div style="clear: both;"></div>
             <progress value="0" max="100"></progress>
    </div>
    <div class="showarea">
        <h3>显示区域</h3>
    </div>
    </body>
</html>

样式代码

 .container{
            box-sizing: border-box;
            width: 404px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-top: 20px;
            background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
            margin: 0 auto;
        }
        input{
            padding: 0;
            margin: 0;
          
        }
        .container input[type=file]{
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            background: #7FFFD4;
            color: #133131;
            float: left;
        }
        .container input[typr=button]{
            width: 100px;
            height: 32px;
            float: left;
            border: 1px solid #ccc;
            color:  #133131;
        }
        progress{
            display: none;
            width: 400px;
            height: 30px;
            margin-top: 7px;
        }
        .showarea{
            width: 600px;
            min-height: 200px;
            border: 1px solid #ccc;
            margin: 30px auto;
        }
        .showarea h3{
            widows: 100px;
            margin: 0 auto;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #cccc;
            color: #133131;
            
        }
        .showareaimg{
            max-width: 1000%;
        }

javescript代码

码来做艺术？

本文授权转载于：AppSo

ID：AppSo

作者：冷思真

编辑：亦夕

艺术家的作品大多有点高深，除非是写实类作品，不然你不一定能「看懂」。

而代码对大多数人来说也是艰难的。对非专业人士来说，代码可能比艺术品还要复杂。那么，如果用代码来搞艺术创作，这一切会更简单吗？

01

不会画画的程序员不是好艺术家

《索思沃尔德的夜晚》是一幅安静的图画。即将西下的太阳光撒在湖面上，湖上波光粼粼，泛着金光，波浪的涟漪一点点的散开。岸上的建筑物则安然有序，灯塔、围墙、小房子，组成了这幅安静的风景图。

有人觉得这幅画看上去冷清，过于安静，是一幅悲伤的画。

有人觉得这幅画阳光照耀四方，小屋整齐的立在一旁，是一幅和谐又温暖的风景画。

当然，如果这些人知道这幅画是用代码画的，可能就只会说这是一幅很漂亮的画了。毕竟代码听上去就和艺术无关，和情感表达无缘。

此画的作者本·埃文斯是一个网页设计师，是一个前端开发，也是一个插画家。《索思沃尔德的夜晚》是他用层叠样式表（CSS）画的一幅作品。除了这幅画，他还用 CSS 画过大海，画过扑克牌。

和他一样使用 CSS 画画的人也不止一个，近些年还有越来越多的趋势。

自由网络开发者克里斯·帕特尔画的辛普森一家是前些年的作品，只是近来才开始被人注意。在 GitHub 上，你可以轻易找到创作者的代码，并在它的基础上进行更改。

当你复制原作者的代码，再稍以修改后，你就可以画出属于自己的辛普森。你还可以给他变色，让他从透明变成黄色、蓝色、绿色。

在 CSS 作图这个领域，数字艺术家戴安娜·史密斯则是一个不可忽略的先驱人物，他以 CSS 的巴洛克风格作画而闻名，创作过多幅 18 世纪复古风格的作品，也画过现实向的静物海报。

史密斯的作品从来不使用绘图软件，他只用手写的 HTML / CSS代码创建精美的图片。作为一个每天 90% 的工作都围绕着 JavaScript 工作的程序员，史密斯却更喜欢 CSS 作画，因为 CSS 有一些限制的规则。

这只是我喜欢 CSS 的众多原因之一。
有限的规则正是它的乐趣所在，你不会期望 CSS 能满足你所有的需求。这就是为什么当你在 CSS 最终找到了一种（可以满足你的）方法时，它就会变得更有价值。

在工作之余，史密斯还会不断回到 CSS 寻找艺术灵感，在限制之中创作新的艺术作品。

因为一些关于这些限制的东西一直在召唤着我。当我在说严格的限制是激发创造力的最佳催化剂时，我并不孤单。因为完全的艺术创作自由可能是一个令人麻痹的概念。

02

CSS 艺术，让每个浏览器都有自己的风格

值得一提的是，有限制的 CSS 图画不是一个完全静态的艺术作品。不管是简单的辛普森一家头像画还是精致的巴洛克肖像画、风景画，他们都是会变化的。每个人可以通过改变开源的代码来创作出自己的 CSS 图画。

在此之外，选择不同的浏览器打开图像也会呈现不同的作品。作为实时呈现的图画，每个浏览器在加载页面时都会将图画的代码呈现为绘图。

而大多数的数字艺术家都是在 Chrome 浏览器上处理代码的。所以除了 Chrome 浏览器能够呈现图片本身预想的画作外，其它浏览器都会「画」出不同的图像。这也展示了不同浏览器转换工作的差别。

创作者说不考虑图画的兼容性问题，反而更有意思。

由于这个项目的艺术性原因，我并不关心跨浏览器的兼容性，所以实时预览可能在除 Chrome 之外的任何浏览器中看起来都很可笑。

适配单一浏览器也有惊喜。当我们将这些代码放进不同浏览器的时候，有的图像有了出乎意料的变化。

Chrome 浏览器在羽毛和发丝的转换上非常细致，展现了本身的细节，Safari 浏览器则在部分高光的处理上有点过火，裙子也多了一条竖线。

左为 Chrome 浏览器呈现效果，右为 Safari 浏览器呈现效果

不过随着时间往前移，我们用更多版本的浏览器配上 CSS 代码图画时，呈现效果就会更特别。

这幅画本尊是这样的：

在 Safari 浏览器中，蕾丝的花边装饰直接盖在了女人的脸上，看不出原图。

在 2014 版本的 Opera 浏览器中，画作有了一种全然不同的风格。

脖子分成了三个部分，眉毛、头发、眼睫毛的位置都出现了偏移和错位，更条码式。

而 Edge 浏览器则自动消掉了画作的棱角，使整幅图画更为平滑、阴沉。

最后在上古时期的网景浏览器中，这位女士的嘴巴、眼睛等五官都变成了不同大小的方块，有点乐高的感觉，风格独树一帜。

作为该领域的先驱人物，史密斯给这些图画的表现赋予了更多的意义：

当你在不同的浏览器上查看这张图片时，你就像是在查看互联网的历史，以及当时用户对浏览器的要求。

03

CSS 画出来的画算艺术吗？更像行为艺术

代码是冰冷的、理性的代表，它是没有感情的。而画作的艺术则能表达作者丰沛的情感和思想。但当理性的代码用来创作感性的画作时，这一切会改变吗？

在一部分人看来，数字艺术是不能算作真正的艺术的。

当大片空白可以在瞬息间充满五彩的色块，渲染过度也能在强大工具的帮助下变得快捷且自然时，人们认为这不再是艺术了。虽然数字化工具做的画也可以很漂亮，很有创意，但人们会觉得它没有「灵魂」。即使它能模仿油画、水墨等不同风格，但创造出的作品也称不上艺术。

这个问题甚至可以上升到「代码是不是艺术」的问题上，深入讨论一下艺术的定义和内涵。

在主流观念中来，那些使用新工具去创作艺术作品的人不算正统艺术家。即便要称为艺术家，也得在前面加上「数字」两个字。在大众的、观念中，数字艺术家和传统的艺术家泾渭分明，完全不同。即便这两种艺术家在显示生活中已经有了很多工作的交织、身份的重合。

对当下的数字时代而言，随着互联网在我们生活中的渗透程度越来越深。每个人可能都会成为数字艺术家，在创作的过程中，都需要数字工具的帮助。

而纯粹用数字工具画出的 CSS 作图在可玩性、趣味性上都强于普通的艺术作品。即使我们不把它看作一个艺术杰作，它也是一个互联网的行为艺术作品。

它让我们意识到自己生活在一个现实扭曲的文化泛滥时代，人与人之间很难获得一致的事实版本。

你看到的东西是由你的设备版本决定的，是和你选择的数字工具有关的。当我们看到的东西不一样的时候，我们创作的东西也是不一样的。

CSS 作画与其说是艺术，不如说它让我们看到了互联网的一种能力，一次进程，一段历史。

本文作者冷思真，首发于公众号「AppSo」（ID：AppSo），这是一个让你手机更好用的专业媒体，欢迎识别下方二维码进行关注

面

在现代网页设计中，个人主页是一个展示个人信息、技能、事件等的重要载体。为了吸引访客的注意力并提供良好的用户体验，设计师通常会运用各种技巧和效果来增加页面的吸引力。本文将介绍如何使用CSS创建一个惊叹的个人主页介绍卡片，展示独特魅力；

PREVIEW

创建HTML结构

首先，需要定义基本的HTML结构来容纳个人主页介绍卡片；

这里外层使用一个div包裹，里面使用三个<div>元素作为包裹容器布局，并在其中添加所需的图像、内容和按钮等：

<div class="card">
  <div class="box">
    <div class="img_box">
      <video 
        src="./assets/video.mp4"
        muted
        autoplay
        loop
      />
    </div>
  </div>

  <div class="box">
    <div class="content">
      <h2>
        Alexa
        <br>
        <span>
          Professional Artist
        </span>
      </h2>

      <ul>
        <li>
          Posts
          <span>22</span>
        </li>
        <li>
          Followers
          <span>999+</span>
        </li>
        <li>
          Following
          <span>7</span>
        </li>
      </ul>

      <button>Follow</button>
    </div>
  </div>

  <div class="circle">
    <div class="img_box">
      <img src="./assets/user.jpg" alt="">
    </div>
  </div>
</div>

外层是card容器，视频和文本内容区域是上下布局的，分别使用box容器包裹，最后是circle容器包裹头像在定位在中间左边超出；

注：
video设置属性：静音(muted)可实现自动播放(autoplay)，接着设置循环播放(loop)；
img>和video>的父容器是一个类名img_box；

添加元素样式

接下来，我们将使用CSS来为个人主页介绍卡片添加样式。以下是一些关键的样式属性和技巧，可以使卡片看起来更加漂亮和吸引人；

Base CSS

使用通配符选择器*来为页面中的所有元素设置相同的样式，清除默认样式，使用怪异盒子模型；
选择文档的根元素（HTML中的 <html>）定义颜色CSS变量；
body使用flex把card容器布局在页面水平、垂直居中；
card使用flex把三个子容器实现垂直排列并两端对齐；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #083d41
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr);
}

.card {
  background-color: var(--clr);
  position: relative;

  width: 320px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 先把容器基本样式调整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本内容区域圆角 */
  border-radius: 20px;
}

/* 头像容器则使用定位布局 */
.card .circle {
  width: 180px;
  height: 180px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 10px solid var(--clr);
}

/* 调整img和video共有的父容器样式 */
.card .box .img_box,
.card .circle .img_box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* img的圆角 */
  border-radius: 50%; 
}
.card .box .img_box {
  /* video的圆角 */
  border-radius: 15px;
}

/* 调整图片和视频的样式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

视频区域CSS

调整card下的第一个box容器样式，也就是包裹视频的容器：

包围图片的边框部分，优化成圆角使其看上去不是那么突兀；
使用::before，::after创建两个伪元素用于需要优化的两角；
设置伪元素的左下角边框圆角程度与box保持一致，当然也可以自行调整；
最后给伪元素添加阴影效果覆盖住box的角，然后阴影颜色设置为与背景色一致，就能实现了：属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色；比如本次设置的值对应：X轴偏移-6px Y轴偏移6px 颜色；

.card .box:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  top: 106px;
  left: -1px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

/* 样式同before类似，注意定位样式 */
.card .box:nth-child(1)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  bottom: -1px;
  left: 105px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

目前添加样式效果图，可以在调试阶段更改明显色彩用于调整距离、位置等；

文本内容CSS

调整card下的第二个box容器样式，也就是包含文字信息的容器：

包围图片的边框部分，优化成圆角样式同上面类似，部分需要调整的看代码；
注意这里设置的是伪元素的左上角圆角程度，然后添加阴影颜色实现；
此外，还对卡片内部的标题、段落和列表应用了特定的样式，以使其在视觉上更加吸引人；

.card .box:nth-child(2) {
  background-color: #fff;

  width: 100%;
  height: 220px;
}

.card .box:nth-child(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  bottom: 106px;
  left: -1px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  top: -1px;
  left: 109px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}

.card .box .content {
  position: absolute;
  inset: 0;
  padding: 30px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 姓名和Title样式 */
.card .box .content h2 {
  width: 100%;
  padding-left: 120px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.card .box .content h2 span {
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 400;
  color: tomato;
  text-transform: initial;
}

/* 列表样式 */
.card .box .content ul {
  position: relative;
  top: 15px;

  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  font-size: 0.85em;
  font-weight: 500;
  color: #999;
}
.card .box .content ul li:not(:last-child)
{
 border-right: 1px solid #ccc; 
}
.card .box .content ul li span{
  font-size: 1.65em;
  color: #333;
}

/* 按钮样式 */
.card .box .content button {
  position: relative;
  top: 25px;
  padding: 8px 30px;
  border: none;
  outline: none;
  background-color: #03a9f4;
  border-radius: 30px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 5px solid var(--clr);
  box-shadow: 0 0 0 10px #fff;
  transition: .5s;
}
.card .box .content button:hover {
  letter-spacing: 0.5em;
  background-color: #ff3d7f;
}

进一步优化

由于按钮的圆角与文本内容卡片的交界处看上去显得有些过于突兀了；所以现在把它们的交界处优化成弧形，样式类似box的伪元素，这里也给按钮创建两个伪元素，用于优化两边的交界处：

.card .box .content button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  left: -29px;
  border-top-right-radius: 20px;
  box-shadow: 5px -7px #fff;
}

.card .box .content button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  right: -29px;
  border-top-left-radius: 20px;
  box-shadow: -5px -7px #fff;
}

最后

除了基本样式之外，还进一步优化个人主页介绍卡片的细节。一些可选的技巧包括：

添加过渡效果：通过为button的容器元素添加过渡效果，使卡片在鼠标悬停时平滑地改变样式(背景色、字符间距)；
使用伪元素添加box-shadow技巧覆盖比较突兀的地方，使各个元素之间的交界处有过渡感，可以增加视觉上的吸引力；
通过给元素设置与body背景相同的颜色，可以使其在页面中更加突出和立体；

通过运用CSS的各种样式属性和技巧，我们可以轻松地创建漂亮的个人主页介绍卡片。这些卡片不仅能够有效地展示个人信息和技能，还能够吸引访客的注意力并提供良好的用户体验。记得尝试不同的样式和效果来定制你自己独特的个人主页卡片！

CSS创作个人主页介绍卡片，展示独特魅力
原文链接：https://juejin.cn/post/7260709771870060603

在线咨询

上一篇：简单小程序：登录页面（html）
下一篇：自学HTML月入过万不是梦-web前端学习编程语言介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商