【无标题】

最新推荐文章于 2024-10-31 14:03:24 发布

2301_80636483

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量676

点赞数 8

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_80636483/article/details/137438166

版权

本文详细介绍了CSS中的圆角边框、阴影效果、文本样式（包括text-shadow和font-face规则）、2D和3D变换、过渡动画以及网页布局技巧，如header、nav、层定位、广告和图片墙的设计。

摘要由CSDN通过智能技术生成

圆角边框与阴影(border-radius与box-shadow属性)

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

文字与文本（text-shadow与word-wrap与@font-face规则）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

.text {
  font-family: 'MyFont', sans-serif;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  word-wrap: break-word;
}

2D变换（transform属性）

.box {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

过渡与动画(transition与animation属性和@keyframes规则)

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease;
}

.box:hover {
  transform: rotate(360deg);
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.box {
  animation: move 2s linear infinite;
}

3D变换

.box {
  perspective: 1000px;
}

.box-inner {
  transform: rotateY(45deg);
}

布局，header nav ,层定位图片列表，固定定位广告，图片墙

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: #f1f1f1;
    }

    nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }

    .layer {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: lightblue;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 20px;
    }

    .image-list img {
      width: 200px;
      height: 200px;
      margin: 10px;
    }

    .ad {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .image-wall {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <header>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <div class="layer">
    <div class="image-list">
      <img src="https://via.placeholder.com/200" alt="Image">
      <img src="https://via.placeholder.com/200" alt="Image">
      <img src="https://via.placeholder.com/200" alt="Image">
      <img src="https://via.placeholder.com/200" alt="Image">
    </div>
  </div>
  <div class="ad"></div>
  <div class="image-wall">
    <img src="https://via.placeholder.com/200" alt="Image">
    <img src="https://via.placeholder.com/200" alt="Image">
    <img src="https://via.placeholder.com/200" alt="Image">
    <img src="https://via.placeholder.com/200" alt="Image">
  </div>
</body>
</html>