之前的 Cherry 樱花雨背景特效 感觉太花里胡哨了,自己整了个渐变星空背景,效果看着还不错,有兴趣的伙伴可以观摩一下。

教程

  1. [Blogroot]\_config.butterfly.yml 找到 index_img 设置为空:

    1
    2
    # The banner image of home page
    index_img:
  2. [Blogroot]\_config.butterfly.yml 找到 background 设置渐变色:

    1
    2
    3
    4
    # Website Background (設置網站背景)
    # can set it to color or image (可設置圖片 或者 顔色)
    # The formal of image: url(http://xxxxxx.com/xxx.jpg)
    background: 'linear-gradient(to right top, #009fff, #ec2f4b)'
  3. [Blogroot]\themes\butterfly\source\css\_global\index.styl 找到 #web_bg 设置渐变动画:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background: $web-bg;
    background-attachment: local;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: bganimation 10s infinite;
    background-size: 800%;
    }
  4. 新建 [Blogroot]\themes\butterfly\source\css\_cyan\index.styl ,添加渐变动画 CSS 和 粒子元素的样式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /* 樱花特效样式 */
    .canvas-container {
    position: fixed;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    z-index: -1;
    }

    // 阅读模式下隐藏背景
    .read-mode .canvas-container {
    display: none;
    }
    // 首页背景渐变动画
    @keyframes bganimation {
    0% {
    background-position: 0% 50%;
    }

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

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

    记得在 [Blogroot]\themes\butterfly\source\css\index.styl 引入,以后所有的 css 都可以写在这个里面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    if (hexo-config('css_prefix')) {
    @import 'nib';
    }

    @import '_third-party/normalize.min.css';
    // project
    @import 'var';
    @import '_global/*';
    @import '_highlight/highlight';
    @import '_page/*';
    @import '_layout/*';
    @import '_tags/*';
    @import '_mode/*';
    + @import '_cyan/*';

    // search
    if (hexo-config('algolia_search.enable')) {
    @import '_search/index';
    @import '_search/algolia';
    }

    if (hexo-config('local_search') && hexo-config('local_search.enable')) {
    @import '_search/index';
    @import '_search/local-search';
    }
  5. [Blogroot]\themes\butterfly\layout\includes\layout.pug 添加元素:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    if page.type !== '404'
    + #canvas.canvas-container
    #body-wrap(class=pageType)
    include ./header/index.pug

    main#content-inner.layout(class=hideAside)
    if body
    div!= body
    else
    block content
    if theme.aside.enable && page.aside !== false
    include widget/index.pug
  6. 新建 [Blogroot]\themes\butterfly\source\js\sky.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    var scene,
    camera,
    renderer,
    container,
    aspect,
    fov,
    plane,
    far,
    mouseX,
    mouseY,
    windowHalfX,
    windowHalfY,
    geometry,
    starStuff,
    materialOptions,
    stars;

    init();
    animate();

    function init() {
    container = document.getElementById(`canvas`);

    mouseX = 0;
    mouseY = 0;

    aspect = window.innerWidth / window.innerHeight;
    fov = 40;
    plane = 1;
    far = 800;

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera = new THREE.PerspectiveCamera(
    fov,
    aspect,
    plane,
    far
    );

    camera.position.z = far / 2;

    scene = new THREE.Scene({ antialias: true });
    scene.fog = new THREE.FogExp2(0x1b1b1b, 0.0001);

    starForge();

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    renderer.setClearColor(0x000000, 0.0);
    container.appendChild(renderer.domElement);

    document.addEventListener('mousemove', onMouseMove, false);
    }

    function animate() {
    requestAnimationFrame(animate);
    render();
    }

    function render() {
    camera.position.x += (mouseX - camera.position.x) * 0.005;
    camera.position.y += (-mouseY - camera.position.y) * 0.005;
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
    }

    function starForge() {
    var amount = 45000;
    geometry = new THREE.SphereGeometry(1000, 100, 50);

    materialOptions = {
    color: new THREE.Color(0xffffff),
    size: 1.1,
    transparency: true,
    opacity: 0.8
    };

    starStuff = new THREE.PointsMaterial(materialOptions);


    for (var i = 0; i < amount; i++) {
    var item = new THREE.Vector3();
    item.x = Math.random() * 2000 - 1000;
    item.y = Math.random() * 2000 - 1000;
    item.z = Math.random() * 2000 - 1000;

    geometry.vertices.push(item);
    }

    stars = new THREE.PointCloud(geometry, starStuff);
    scene.add(stars);
    }

    function onMouseMove(e) {
    mouseX = e.clientX - windowHalfX;
    mouseY = e.clientY - windowHalfY;
    }

  7. [Blogroot]\_config.butterfly.yml 找到 inject,引入 js,由于星空动画是基于 three.js,所以一定要先引入 three.js

    1
    2
    3
    4
    5
    inject:
    head:
    - <script src="https://cyan-blog.oss-cn-shenzhen.aliyuncs.com/cdn/js/three.min.js"></script>
    bottom:
    - <script async data-pjax src="/js/sky.js"></script>
  8. 最后执行 hexo cl,hexo g,hexo s 三连即可看到效果。