css实现iphone14渐变壁纸背景效果代码-html代码-BFW代码库

css实现iphone14渐变壁纸背景效果代码

代码语言：html

所属分类：背景

代码描述：css实现iphone14渐变壁纸背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">



    <style>
        *{
           box-sizing: border-box;
          }
          body {
            margin: 0px;
            background-color: black;
            color: white;
            text-align: center;
            font-family: 'Poppins', sans-serif;
          }
          .container {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(1rem, 3vw, 3rem);
            padding: 3rem;
          }
          .iphone-case {
            --border-radius-outer: 40px;
            --outer-padding: 0.5rem;
            --case-color: hsl(0, 0%, 0%);
            --border-radius-inner: calc( var(--border-radius-outer) - var(--outer-padding));
            box-shadow: 0px 0px 0px 2px white;
            background-color: var(--case-color);
            border-radius: var(--border-radius-outer);
            padding: var(--outer-padding);
            width: 320px;
            aspect-ratio: 1/2;
            position: relative;
            margin-inline: auto;
          }
          .iphone-case > div {
            --start-color: hsl(0, 0%, 0%);
            --shadow-x: 2px;
            height: 50%;
            border-radius: 50%;
            background-color: var(--base-color, #fdc1f7);
            box-shadow: 0px 2px 10px var(--base-color);
          }
          .iphone-case .gradient-1 {
            --gradient-stop-1: 35%;
            border-top-left-radius: var(--border-radius-inner);
            border-top-right-radius: var(--border-radius-inner);
            border-bottom: 3px solid var(--base-color);
            box-shadow: 0px 2px 4px var(--base-color);
          }
          .iphone-case .gradient-2 {
            --gradient-stop-1: 70%;
            --gradient-stop-2: 80%;
            border-bottom-left-radius: var(--border-radius-inner);
            border-bottom-right-radius: var(--border-radius-inner);
            border-top: 3px solid var(--base-color);
            box-shadow: 0px -2px 4px var(--base-color);
            background-image: radial-gradient(circle at top, var(--start-color) var(--gradient-stop-1), var(--color-2, hsl(0, 0%, 0%)) var( --gradient-stop-2) , var(--base-color) 100%);
          }
          .case-1 .gradient-1 {
            --base-color: #fdc1f7;
            background-image: radial-gradient(circle at bottom, var(--start-color) var(--gradient-stop-1), #230a77 50%, #c84fe4 70%,  var(--base-col.........完整代码请登录后点击上方下载按钮下载查看