AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

111.【金橘社区1.0】（五）

2023-09-24 75
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 111.【金橘社区1.0】

4. 好看的动态背景推荐

css

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 使用flex布局，让内容垂直和水平居中 */
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
/* 背景颜色 */
section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
.box {
    position: relative;
}
/* 背景圆样式 */
.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}
/* 背景圆动画 */
@keyframes animate {
    0%, 100%, {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}
.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}
.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}
/* 登录框样式 */
.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
/* 登录标题样式 */
.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
/* 登录标题的下划线样式 */
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
.form h2:hover:before {
    width: 53px;
}
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
/* 输入框样式 */
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form .inputBox input::placeholder {
    color: #fff;
}
/* 登录按钮样式 */
.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>登录:微信公众号AlbertYang</title>
</head>
<body>
    <section>
        <!-- 背景颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
            <!-- 背景圆 -->
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
            <!-- 登录框 -->
            <div class="container">
                <div class="form">
                    <h2>登录</h2>
                    <form>
                        <div class="inputBox">
                            <input type="text" placeholder="姓名">
                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码">
                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登录">
                        </div>
                        <p class="forget">忘记密码?<a href="#">
                                点击这里
                            </a></p>
                        <p class="forget">没有账户?<a href="#">
                                注册
                            </a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

6. 炫酷的搜索框

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title> 搜索框 </title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1309180_m0vigzfu7y.css">
    <style type="text/css">
        .bod1 {
            /*background: -webkit-linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);*/
            /*background-image: url(" 2558.jpg");*/
            /*background-size:cover;*/
            background: #aa4b6b;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        .search-box {
            position: absolute;
            top: 10%;
            left: 60%;
            transform: translate(-10%, -50%);
            background: #FD2C6B;
            height: 40px;
            border-radius: 30px;
            /*圆角边框*/
            padding: 10px;
        }
        .search-box:hover>.search-text {
            width: 400px;
        }
        .search-box:hover>.search-btn {
            background: white;
            color: #26087b;
        }
        .search-btn {
            color: white;
            float: right;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #FD2C6B;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.5s;
        }
        .search-text {
            border: none;
            background: none;
            outline: none;
            float: left;
            padding: 0;
            color: white;
            font-size: 20px;
            font-family: "Microsoft YaHei UI Light";
            transition: 0.5s;
            line-height: 40px;
            width: 0px;
        }
    </style>
</head>
<body class="bod1">
    <div class="search-box">
        <input class="search-text" name="inputs" placeholder="在这里输入你想要搜的的东西" >
        <a class="search-btn" onclick="as()">
            <i class="iconfont iconchazhao"></i>
        </a>
    </div>
</body>
<script>
   function as() {
   let e = document.getElementsByClassName('search-text').inputs.value
   window.location.href = `https://www.baidu.com/s?wd=${e}`
    console.log("fsfs",e)
   }
</script>
</html>

7. 返回顶部

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>doc</title>
  <style>
    .arrow{
      border: 9px solid transparent;
      border-bottom-color: #3DA0DB;
      width: 0px;
      height: 0px;
      top:0px
    }
    .stick{
      width: 8px;
      height: 14px;
      border-radius: 1px;
      background-color: #3DA0DB;
      top:15px;
    }
    #back_top div{
      position: absolute;
      margin: auto;
      right: 0px;
      left: 0px;
    }
    #back_top{
      background-color: #dddddd;
      height: 38px;
      width: 38px;
      border-radius: 3px;
      display: block;
      cursor: pointer;
      position: fixed;
      right: 50px;
      bottom: 100px;
      display: none;
    }
  </style>
</head>
<body>
<div id="article"></div>
<div id="back_top">
  <div class="arrow"></div>
  <div class="stick"></div>
</div>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
  $(function(){
    for(var i =0 ;i <100;i++){
      $("#article").append("<p>xxxxxxxxxx<br></p>")
    }
  })
</script>
<script>
  $(function(){
    $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
      var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
      if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
        $("#back_top").fadeIn(400); //淡入
      }else{
        $("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
      }
    });
    $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
      $("html,body").animate({scrollTop:"0px"},200);
    });
  });
</script>
</body>
</html>

文章标签：
前端开发
吉士先生
目录
相关文章
吉士先生
|
前端开发 JavaScript
111.【金橘社区1.0】（二）
111.【金橘社区1.0】
吉士先生
53 0
吉士先生
|
前端开发
111.【金橘社区1.0】（六）
111.【金橘社区1.0】
吉士先生
59 0
笨笨小乌龟
|
5月前
|
Linux 开发者
Linux底层驱动社区饮水机系统详解
在Linux驱动开发中，入门时通常会关注驱动程序的三大核心步骤：入口函数、出口函数和声明许可证。这些步骤构成了驱动程序的基本结构，是驱动与内核交互的基础。下面是对这三个步骤的简要说明：
笨笨小乌龟
45 0
吉士先生
|
前端开发 JavaScript Java
111.【金橘社区1.0】（一）
111.【金橘社区1.0】
吉士先生
118 0
111.【金橘社区1.0】（一）
吉士先生
|
SQL JavaScript 前端开发
111.【金橘社区1.0】（四）
111.【金橘社区1.0】
吉士先生
51 0
吉士先生
|
前端开发
111.【金橘社区1.0】（三）
111.【金橘社区1.0】
吉士先生
48 0
六月的雨在钉钉
|
开发者
我和社区的2022
简述我和社区一路走来的点点滴滴
六月的雨在钉钉
340 0
我和社区的2022
acc8226
|
数据安全/隐私保护 Docker 容器
JetLinks 社区版安装
JetLinks 社区版安装
acc8226
562 0
阿里云云原生
|
Cloud Native 数据可视化 关系型数据库
训练营 | 如何成为一名开源社区贡献者？
「云原生应用插件扩展训练营」由阿里云云原生团队围绕 KubeVela、OpenYurt、Koordinator、OpenKruise、Fluid 等云原生开源项目打造，为了帮助更多开发者感受开源社区的魅力，了解如何更快地参与社区贡献。
阿里云云原生
252 0
训练营 | 如何成为一名开源社区贡献者？
游客5ce4fi7afoeai
|
云计算 开发者
阿里云社区
学习阿里云
游客5ce4fi7afoeai
509 0

热门文章

最新文章

  • 1
    RDS入门——Excel文件转存到RDS数据库实践
  • 2
    3、Python与设计模式--建造者模式
  • 3
    PostgreSQL SQL HINT的使用
  • 4
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 5
    流批一体的近实时数仓的思考与设计
  • 6
    带你读《存储漫谈Ceph原理与实践》第三章接入层3.3.文件存储 CephFS（一）
  • 7
    java split()
  • 8
    （转载） 数组a[]={3,5,2,4,1,8}，要求从a中找出所有“和”等于10的子集
  • 9
    linux下java 调用 c jni 实现 HelloWorld
  • 10
    ASP.NET MVC Music Store教程（3)：视图和视图模型
  • 1
    一个包含了 50+ C#/.NET编程技巧实战练习教程
    46
  • 2
    使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试
    29
  • 3
    C#集合数据去重的5种方式及其性能对比测试分析
    24
  • 4
    精选10款C#/.NET开发必备类库（含使用教程），工作效率提升利器！
    25
  • 5
    .NET MongoDB数据仓储和工作单元模式封装
    32
  • 6
    推荐几个不错的数据库设计工具
    34
  • 7
    C#正则表达式快速入门
    20
  • 8
    好消息，在 Visual Studio 中可以免费使用 GitHub Copilot 了！
    31
  • 9
    3款.NET开源、功能强大的通讯调试工具，效率提升利器！
    21
  • 10
    .NET 在 Visual Studio 中的高效编程技巧集
    22

    • 相关课程

    更多
  • OceanBase社区版入门到实战教程
  • 深入浅出白话Serverless-1024程序员节创造营公益课
  • CNCF Alibaba 云原生技术公开课
  • ModelScope社区Library技术架构介绍
  • Serverless Develpoer Meetup 课程
  • 场景实践- 新手玩转云计算-搭建个人博客

    • 相关电子书

    更多
  • 未来社区白皮书
  • 魔搭社区产品生态介绍
  • Kubeflow 社区简介与落地实践

    • 相关实验场景

    更多
  • DevOps高效开发管理-云效实践初体验
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)