免费的矢量图标库-网页开发者必备

大家好我是山河,最近有很多朋友问我有没有这些图标啊,那些图标啊,我很疑惑啊,这些东西不是有很多免费的图库吗?

今天就给大家分享一个,开发者必备的图库站

阿里巴巴矢量图标库

网站地址:https://www.iconfont.cn/

法律声明:

iconfont法律声明截图

关于版权©说明

iconfont法律声明截图

完整法律声明地址:iconfont 法律声明 (taobao.com)

个人开发者,不商用是免费的,如果用官方的进行商用,则要官方的书面许可,如果是用户提交的库,则看用户的要求,最好能得一份书面说明。

图库预览图

由此可以看出来,对于我们普通开发者还是非常舒服了。

本文就讲到这里了。

山河博客HTML

一个动画渐变的科幻形按钮

大家好我是山河,今晚我给大家带来了一个很好看的按钮,动画效果很棒,代码大家自己借鉴吧。

话不多说,直接贴代码出来。

先上效果图(点击下面文字可以查看图片)

blog.shanhe.info
效果图

直接上代码

css代码块

a {
            display: block;
            width: 220px;
            height: 70px;
            z-index: 1;
        }

        a:after {
            content: '';
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            animation: gradient 3s ease-in-out infinite, border 0.5s forwards ease-in-out reverse;
        }

        a>span {
            display: block;
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease-in-out infinite;
        }

        .absolute-centering,
        body:after,
        a,
        a:after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .text-formatting,
        a {
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            letter-spacing: 2px;
            line-height: 70px;
            font-size: 28px;
        }

        @keyframes gradient {
            0% {
                background-position: 14% 0%;
            }

            50% {
                background-position: 87% 100%;
            }

            100% {
                background-position: 14% 0%;
            }
        }

        @keyframes border {
            0% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            25% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            50% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
            }

            75% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
            }

            100% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
            }
        }

html代码块

<a href="#"><span>按钮</span></a>

好了,本文到此结束。

我是山河

山河博客HTML

山河html教程-最全表单教程

大家好,我是山河,今天我给大家带来html表单教程,可配合css,js,php等使用,表单用处广泛,评论,文章发表,留言板,意见,个人信息等,用处广泛。

本次教程是最终教程,带实例和成品图片
因为我这个手机web编辑器会自动补全代码,所以多出来很多现在用不到的东西。
表单内用到的属性我建议去菜鸟教程看属性
有错误请指出
以下是我写的一个实例,因为自动补全会补一些七七八八的东西,真烦

<!DOCTYPE html>

<html lang="CN">

<head>

<meta charset="utf-8">

<meta name="keywords" content="山河html表单">

<meta name="description" content="html教程">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--响应式-->

<title>山河html表单教程</title>

<script>src="https://code.jquery.com/jquery-3.4.1.min.js"</script>

</head>

<body id="id0" style="">

<form action="biaodan.php" method="post" id="id2">

名字:<input type="text" name="name" size="7" maxlength="6" value="最多5个字" id="id3"><br>

地址:<input type="text" name="address" maxlength="30" value="最多30字" id="id4"><br>

电话:<input type="text" name="phone" maxlength="14" value="最多14字" id="id5"><br>

账号:<input type="text" name="zhname" maxlength="12" size="12" id="id6"><br>

密码:<input type="password" name="Password" maxlength="14" size="14" id="id7" style=""><br>

学历:<select name="Academic Degree" id="id8">

  <option value="university" selected="selected" id="id9">大学</option>

  <option value="High school" id="id10">高中</option>

  <option value="Junior middle school" id="id11">初中</option>

  <option value="Primary school" id="id12">小学</option>

  <option value="Be Reading" id="id13">在读</option>

</select><br>

性别:<input type="radio" name="xinbie" value="male" id="id8">男

<input type="radio" name="xinbie" value="female" id="id9">女<br>

备注:<textarea name="remark" rows="8" cols="30" id="id10">山河html表单教程</textarea><br>

&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input wetools-sendsubmit="" type="button" name="tijiao" value="提交" id="id9">  &nbsp; &nbsp; <input type="reset" value="重置" id="id10">

</body>

</html>

成品图片我加上去
加到附件上了,下载来看吧
教程结束了,有事情群里找我
附件上的图片一言难尽,我做的成品和附加上的图片差远了,论坛克扣像素跟扣扣一样
by.山河 2020.4.2

山河博客HTML

HTML表单升级教程-web前端

大家好,我是山河

这次带来HTML表单高级教程

没记错的话菜鸟教程是没有我写的这篇教程这么全

有问题可以邮箱发信息

不多说,上代码

<input type="url" name="userurl"/>
//url属性用于说明网站网址,显示为在一个文本框中输入URL地址。在提交表单时会自动验证url的值,如果不合格,验证不通过并会弹出提示
//其实也可以使用普通属性设置url输入框,例如可以使用max属性设置其最大值、min属性设置其最小值、step属性设置合法的数字间隔、利用value属性规定其默认值

<input type="email" name="user_email"/>
//email属性用于让浏览者输入E-mail地址。在提交表单时会自动验证email域的值,如果不合格就自动弹出提示,并拦截

帖子首发日期 2020-6-14

山河于 lolichan.vip论坛首发

山河博客HTML

制作响应式网站教程

大家好我是山河,鉴于很多小伙伴需要搞响应式网站,但是又无从下手,所以山河抽时间给大家写了一篇文章,个人认为应该算是通俗易懂。

案例代码可下载(网站底部)

好了,开始教程。

1.了解什么是响应式网页设计

2.了解 viewport 和 媒体查询

3.网页布局技术

下面我们开始讲解第一点

了解什么是响应式网页设计:

响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

之后是第二点

了解 viewport 和 媒体查询

所谓 viewport(视窗) 呢,就是我们眼睛能看见的地方,而在浏览器中,就是我们能在浏览器中看见的区域。

viewport 山河就不解释这么多,直接给大家常用的移动端的布局窗口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

上面这个代码的作用是让当前 viewport 的宽度等于 设备 的宽度,且禁止用户缩放。

viewport 详细的内容和参数 可以去 MDN 或 w3c 查看,这里就不多讲了。

然后山河来讲 媒体查询

那什么是媒体查询 ( @media 查询 ) 呢?

响应式设计仅仅是因为媒介查询才新兴起来的。此话可以在 MDN 上查到

CSS2 中引入了 @media 规则,它让为不同媒体类型定义不同样式规则成为可能。

下面来一个媒体查询的简单案例

@media screen and (max-width: 480px) {
  body {
    background: blue;
  }
}

此代码解释:当浏览器宽度达到 480px 或更小时,背景颜色改变为blue(蓝色)

然后具体的内容也是可以去MDN和w3c去看看,这里时间紧迫,山河就不讲这么仔细了。

接下来山河开始讲现代网页布局方式。

  1. 弹性布局
  2. 多列布局
  3. 网格布局

山河推荐使用 弹性布局的方式,山河 个人认为 它比多列布局,网格布局简便

由于时间关系,山河就只写一个弹性布局+viewport +媒体查询的方式给大家作为例子,多列布局和网格布局可以去MDN或w3c上查看相关资料,直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>山河-响应式网页案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background: #FFA500;
        }
        header h1 {
            padding: 30px;
            text-align: center;
        }
        .container {
            max-width: 1135px;
            margin: 10px auto;
            padding: 10px;
            background: #ecf0f1;
        }
        .container ul {
            list-style: none;
            /* 开启弹性盒子 */
            display: flex;  
            /* 位置不够就换行,第一行在上方 */
            flex-wrap: wrap;
            /* 两端对齐,项目之间的间隔都相等 */
            justify-content: space-between;
        }
        .container ul li {
            background: #fff;
            margin: 10px 5px;
            display: flex;
            justify-content: space-between;
            width: 30%;
            height: 30%;
        }
        .container ul li img {
            width: 50%;
            height: 100%;
        }
        footer {
            background: #2E2E2E;
            color: #fff;
            padding: 20px 0;
        }
        footer p {
            text-align: center;
        }
        /* 媒体查询 */
        /* 适配平板端 */
        @media screen and (max-width:770px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 48%;
                margin: 10px 0b;
            }
        }
        /* 适配手机端 */
        @media screen and (max-width:480px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>山河-响应式网页案例</h1>
    </header>
    <div class="container">
        <ul>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>Copyright © 2021-2022 山河技术分享-山河博客 blog.shanhe.info All Rights Reserved.</p>
    </footer>
</body>
</html>

效果预览图

blog.shanhe.info-wap
适应手机端

blog.shanhe.info-phablet
适应平板端
blog.shanhe.info-pc
PC端

好了,本文到此结束,希望能帮助到大家

文章 © 山河

有问题即可去网站底部找到站长信息联系山河

下载地址三个都是直接下载,下载方式上面的文字可无视。

山河博客PC

JQuery选择器笔记

大家好,我是山河,最近有在学Javascript,感觉学得差不多了,就去学习JQuery,毕竟咱们自学的基础打好了之后主要是实战,最近也实战撸了原生js的几个小项目,但是感觉有点费力耗时间,然后就选择了JQuery。

本文是JQuery的笔记,接下来几天都会陆陆续续的从本地笔记转移进博客文章,作为云端记录,随时查看。

PS:我是黑马pink老师学的,笔记截图均是来自哔哩哔哩上的黑马Pink老师的视频。

另外附上JQuery在线手册 jquery 在线手册 | jQuery API 中文手册 | jQuery 速查表 | jQuery 参考手册 | jQuery CHM | jQuery 在线文档 | jQuery 1.12.1 (hemin.cn)

本文到此结束。

pink老师视频

https://www.bilibili.com/video/BV1Sy4y1C7ha

山河博客

暗黑紫冒泡幽灵404错误页

大家好我是山河,之前我不是在折腾网站的404错误页嘛,当时网友分享了很多个404错误页给我,我挑了几个好看的也分享给大家,不多说,先上图再上资源。

这个404错误页是纯代码实现,没用上图片!真纯代码,可以借鉴动画效果。

山河直接给大家上图上代码上资源

404错误页展示图
404错误页展示

幽灵气泡是动图,但是我懒得弄Gif动图了。

再上代码

<!-- /* 山河博客此代码源于网友分享:原作者信息未改,仅修复了代码 博客:blog.shanhe.info */ -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <title>山河博客-404页面</title>
  <style>
    <!-- 由于网站CSS代码在HTML代码里没高亮展示,我把CSS移到另外一个单独的CSS代码块,复制单独的CSS代码块过来这里即可,或者引入也可以 -->
  </style>
</head>
<body>
  <div class="box">
    <div class="box__ghost">
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="box__ghost-container">
        <div class="box__ghost-eyes">
          <div class="box__eye-left"></div>
          <div class="box__eye-right"></div>
        </div>
        <div class="box__ghost-bottom">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="box__ghost-shadow"></div>
    </div>
    <div class="box__description">
      <div class="box__description-container">
        <div class="box__description-title">404错误!</div>
        <div class="box__description-text">看来我们找不到你要找的那一页</div>
      </div>
      <a href="https://blog.shanhe.info" class="box__button">返回首页</a>
    </div>
  </div>
</body>
</html> 
html,
    body {
      background: #28254C;
      font-family: 'Ubuntu';
    }
    * {
      box-sizing: border-box;
    }
    .box {
      width: 350px;
      height: 100%;
      max-height: 600px;
      min-height: 450px;
      background: #332F63;
      border-radius: 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 30px 50px;
    }
    .box .box__ghost {
      padding: 15px 25px 25px;
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -30%);
    }
    .box .box__ghost .symbol:nth-child(1) {
      opacity: .2;
      animation: shine 4s ease-in-out 3s infinite;
    }
    .box .box__ghost .symbol:nth-child(1):before,
    .box .box__ghost .symbol:nth-child(1):after {
      content: '';
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      left: 0;
    }
    .box .box__ghost .symbol:nth-child(1):before {
      transform: rotate(45deg);
    }
    .box .box__ghost .symbol:nth-child(1):after {
      transform: rotate(-45deg);
    }
    .box .box__ghost .symbol:nth-child(2) {
      position: absolute;
      left: -5px;
      top: 30px;
      height: 18px;
      width: 18px;
      border: 4px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: .2;
      animation: shine 4s ease-in-out 1.3s infinite;
    }
    .box .box__ghost .symbol:nth-child(3) {
      opacity: .2;
      animation: shine 3s ease-in-out .5s infinite;
    }
    .box .box__ghost .symbol:nth-child(3):before,
    .box .box__ghost .symbol:nth-child(3):after {
      content: '';
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 5px;
      left: 40px;
    }
    .box .box__ghost .symbol:nth-child(3):before {
      transform: rotate(90deg);
    }
    .box .box__ghost .symbol:nth-child(3):after {
      transform: rotate(180deg);
    }
    .box .box__ghost .symbol:nth-child(4) {
      opacity: .2;
      animation: shine 6s ease-in-out 1.6s infinite;
    }
    .box .box__ghost .symbol:nth-child(4):before,
    .box .box__ghost .symbol:nth-child(4):after {
      content: '';
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 10px;
      right: 30px;
    }
    .box .box__ghost .symbol:nth-child(4):before {
      transform: rotate(45deg);
    }
    .box .box__ghost .symbol:nth-child(4):after {
      transform: rotate(-45deg);
    }
    .box .box__ghost .symbol:nth-child(5) {
      position: absolute;
      right: 5px;
      top: 40px;
      height: 12px;
      width: 12px;
      border: 3px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: .2;
      animation: shine 1.7s ease-in-out 7s infinite;
    }
    .box .box__ghost .symbol:nth-child(6) {
      opacity: .2;
      animation: shine 2s ease-in-out 6s infinite;
    }
    .box .box__ghost .symbol:nth-child(6):before,
    .box .box__ghost .symbol:nth-child(6):after {
      content: '';
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      right: -5px;
    }
    .box .box__ghost .symbol:nth-child(6):before {
      transform: rotate(90deg);
    }
    .box .box__ghost .symbol:nth-child(6):after {
      transform: rotate(180deg);
    }
    .box .box__ghost .box__ghost-container {
      background: #fff;
      width: 100px;
      height: 100px;
      border-radius: 100px 100px 0 0;
      position: relative;
      margin: 0 auto;
      animation: upndown 3s ease-in-out infinite;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes {
      position: absolute;
      left: 50%;
      top: 45%;
      height: 12px;
      width: 70px;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
      width: 12px;
      height: 12px;
      background: #332F63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      left: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
      width: 12px;
      height: 12px;
      background: #332F63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      right: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom {
      display: flex;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom div {
      flex-grow: 1;
      position: relative;
      top: -10px;
      height: 20px;
      border-radius: 100%;
      background-color: #fff;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
      top: -12px;
      margin: 0 -0px;
      border-top: 15px solid #332F63;
      background: transparent;
    }
    .box .box__ghost .box__ghost-shadow {
      height: 20px;
      box-shadow: 0 50px 15px 5px #3B3769;
      border-radius: 50%;
      margin: 0 auto;
      animation: smallnbig 3s ease-in-out infinite;
    }
    .box .box__description {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }
    .box .box__description .box__description-container {
      color: #fff;
      text-align: center;
      width: 200px;
      font-size: 16px;
      margin: 0 auto;
    }
    .box .box__description .box__description-container .box__description-title {
      font-size: 24px;
      letter-spacing: .5px;
    }
    .box .box__description .box__description-container .box__description-text {
      color: #8C8AA7;
      line-height: 20px;
      margin-top: 20px;
    }
    .box .box__description .box__button {
      display: block;
      position: relative;
      background: #FF5E65;
      border: 1px solid transparent;
      border-radius: 50px;
      height: 50px;
      text-align: center;
      text-decoration: none;
      color: #fff;
      line-height: 50px;
      font-size: 18px;
      padding: 0 70px;
      white-space: nowrap;
      margin-top: 25px;
      transition: background .5s ease;
      overflow: hidden;
    }
    .box .box__description .box__button:before {
      content: '';
      position: absolute;
      width: 20px;
      height: 100px;
      background: #fff;
      bottom: -25px;
      left: 0;
      border: 2px solid #fff;
      transform: translateX(-50px) rotate(45deg);
      transition: transform .5s ease;
    }
    .box .box__description .box__button:hover {
      background: transparent;
      border-color: #fff;
    }
    .box .box__description .box__button:hover:before {
      transform: translateX(250px) rotate(45deg);
    }
    @keyframes upndown {
      0% {
        transform: translateY(5px);
      }
      50% {
        transform: translateY(15px);
      }
      100% {
        transform: translateY(5px);
      }
    }
    @keyframes smallnbig {
      0% {
        width: 90px;
      }
      50% {
        width: 100px;
      }
      100% {
        width: 90px;
      }
    }
    @keyframes shine {
      0% {
        opacity: .2;
      }
      25% {
        opacity: .1;
      }
      50% {
        opacity: .2;
      }
      100% {
        opacity: .2;
      }
    }

最后再上资源

源码代码均为网友分享,山河只做了修复效果或者bug。

山河博客

小书童404错误页

大家好我是山河,之前我不是在折腾网站的404错误页嘛,当时网友分享了很多个404错误页给我,我挑了几个好看的也分享给大家,不多说,先上图再上资源。

小书童404错误页照片
山河博客-小书童404错误页

这个404错误页还是不错的,话不多说,上资源

前端 CDN 公共库大全一览

大家好我是山河,今天给大家总结一个前端CDN公共库大全哈,帮助各位开发者快速找到适合你的最佳选择。

CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。

https://www.jsdelivr.com/

使用最为广泛的CDN了,除了有静态库的加速外,还有npm\github\WordPress加速,2021年底国内备案被取消了,现在用cf的cdn,国内速度可想而知。

https://developers.google.com/speed/libraries

Google出品,必属精品了,谷歌CDN库,肯定很全,当然国内访问不了。

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview

微软CDN库,该服务是免费的,不需任何注册,可用于商业性或非商业性用途

https://cdnjs.com/

站点是国外的,CDNJS 拥有非常完整的 JavaScript 库,你还可以提交 js库,审核通过就能用。

lib.sinaapp.com

新浪云计算CDN公共库,节点有北京和广州,国内速度飞快

http://jscdn.upai.com/

又拍云js库,又拍云提供了常用的JavaScript库CDN服务

http://staticfile.org/

七牛云提供的CDN库。

http://cdn.bytedance.com/

字节跳动静态资源公共库,国内大公司。

https://www.bootcdn.net

BootCDN 是猫云联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务,为Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务,国内节点多。

PS:(官网通知)BootCDN 对外提供服务的域名已经于两年前(即 2020 年)变更为新域名 cdn.bootcdn.net,
老域名 cdn.bootcss.com 将于 2022 年 3 月 31 日下线。
请尽快切换到新域名,以免影响贵站功能!!!

https://cdnjs.net/

免费开源前端公共库,同步的cdnjs的资源,此公共库CDN加速服务始于2014年

https://cdn.baomitu.com/

60前端资源库是由奇舞团支持并的开源项目CDN,支持HTTPS和HTTP/2,囊括上千个前端资源库维护和Google均等库。同步cdnjs的资源。

本篇文章是由山河整理的前端CDN库大全。

本站采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议,转载或复制请注明出处

山河博客-404错误页图片

分享一个自定义好看的二次元风格的404错误页HTML5单页

大家好我是山河,今天我给大家分享一个二次元风格的404错误页。

山河好不容易修复了那位网友发给我的404错误页,结果刚把文章发出去没半天,又给我找事情做了,这次发了一个二次元风格的404错误页,山河修复了一些没用的代码,还剩下一小段CSS代码没修复,那段是动画的,我试了一下,能正常运行,我也就不管了,但是山河的代码编辑器居然显示警告⚠,浏览器里打开f12一看,没毛病报错,那就不管了。

不说了,先上个效果图片给大家看看长啥样

对了,这款404错误页是有音乐的,但是山河没法录制给大家听。

山河博客-二次元404错误页
山河博客-二次元404错误页

页面是有动态效果的,头像触碰会旋转,文字会跳动,就像这样

山河博客-二次元404错误页
山河博客-二次元404错误页

好了,介绍就到这里,文章结束

PS:本页面为网友分享给山河,山河仅做了修复,页面如有联系信息则为原作者,另外,如有侵犯您的权益,请联系山河删除。