超好看的个人网页，你还不fork一下？

最新推荐文章于 2025-04-14 12:04:35 发布

阳树阳树

最新推荐文章于 2025-04-14 12:04:35 发布

阅读量7.4k

点赞数 30

文章标签：前端 JS HTML

本文链接：https://blog.youkuaiyun.com/weixin_60789461/article/details/124123075

版权

本文展示了一个经过改进的个人电商项目，包括开始页面、VR观景、文创购买页面的源码。作者使用了新的布局和动画效果，提升了用户体验。项目托管在GitHub上，邀请读者查看并提供反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元之旅</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
  <style>
      html {
          box-sizing: border-box;
          background: #ffc600;
          font-family:'helvetica neue';
          font-size: 20px;
          font-weight: 200;
      }
      body {
          margin: 0;
      }
      *,*:before,*:after {
          box-sizing: inherit;
      }

      .panels {
        min-height: 100vh;
        overflow: hidden;
        display: flex;
      }

      .panel {
          background: #6B0F9C;
          box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
          color: white;
          text-align: center;
          align-items: center;
          transition: 
            font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* flex的变化用0.7s的渐变动画，渐变动画的时间函数是贝塞尔曲线，具体参数就和他写的似的 */
            flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            /* 就是对于background的变化 采用0.2s的渐变动画 */
            background 0.2s;
          font-size: 20px;
          background-size: cover;
          background-position: center;
          flex: 1;
          justify-content: center;
          align-items: center;
          display: flex;
          /* 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。 */
          flex-direction: column;
      }
      .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
      .panel2 { background-image:url(第二张.jpg); }
      .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
      .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
      .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

      .panel > * {
          margin: 0;
          width: 100%;
          transition:transform 0.5s;
          flex:1 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .panel > *:first-child {transform: translateY(-100%)}
      .panel.open-active > * :first-child {transform:translateY(0)}
      .panel > *:last-child {transform: translateY(100%)}
      .panel.open-active > * :last-child {transform:translateY(0)}

      .panel a{
          text-transform: uppercase;
          font-family: 'Amatic SC',cursive;
          text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
          font-size: 2em;
      }
      .panel a:nth-child(2){
          font-size: 4em;
      }

      .panel.open {
          flex: 5;
          font-size: 40px;
      }

      a {
        text-decoration: none;
        /* font-size: 2em; */
        color: white;

      }
  </style>


  <div class="panels">
    <div class="panel panel1">
      <a href="index1.html">Hey</a>
      <a href="index1.html">start</a>
      <a href="index1.html">Dance</a>
      <!-- <a href=""></a> -->
    </div>
    <div class="panel panel2">
      <a href="index1.html">Give</a>
      <a href="index1.html">your</a>
      <a href="index1.html">Receive</a>
    </div>
    <div class="panel panel3">
      <a href="index1.html">Experience</a>
      <a href="index1.html">元</a>
      <a href="index1.html">Today</a>
    </div>
    <div class="panel panel4">
      <a href="index1.html">Give</a>
      <a href="index1.html">之</a>
      <a href="index1.html">You can</a>
    </div>
    <div class="panel panel5">
      <a href="index1.html">Life</a>
      <a href="index1.html">旅</a>
      <a href="index1.html">Motion</a>
    </div>
  </div>

  <script>
  const panels =document.querySelectorAll('.panel');

    function toggleOpen() {
        this.classList.toggle('open');
    }

    function toggleActive(e) {
        if(e.propertyName.includes('flex')){
            this.classList.toggle('open-active');
        }
    }

    panels.forEach(panel => panel.addEventListener('click',toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

  </script>



</body>
</html>

VR观景源码：⚡

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>元之旅</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
function smartColumns() { //Create a function that calculates the smart columns

//Reset column size to a 100% once view port has been adjusted
$("ul.column").css({ 'width' : "100%"});

var colWrap = $("ul.column").width(); //Get the width of row
var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column	

}	

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
smartColumn