7款不容错过的前端特效源码分享（附源码及演示效果）

分享7款非常不错炫酷的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会列出核心的代码但你也可以点击预览获取查看该源码的最终展示效果及下载该源码资源

图像网格动画

纯js和css实现的多方位多样式的图像网格动画

点击预览获取

在这里插入图片描述
核心代码

   <div class="wrapper">
        <div class="box" data-i="13" data-title="⇒⊚⇐"></div>
        <div class="box" data-i="0" data-title="↓"></div>
        <div class="box" data-i="1" data-title="→"></div>
        <div class="box" data-i="2" data-title="🎲"></div>
        <div class="box" data-i="3" data-title="↖"></div>
        <div class="box" data-i="4" data-title="↘"></div>
        <div class="box" data-i="5" data-title="↗"></div>
        <div class="box" data-i="6" data-title="↙"></div>
        <div class="box" data-i="7" data-title="↖↘"></div>
        <div class="box" data-i="8" data-title="↘↖"></div>
        <div class="box" data-i="9" data-title="🤔"></div>
        <div class="box" data-i="10" data-title="↙↗"></div>
        <div class="box" data-i="11" data-title="↗↙"></div>
        <div class="box" data-i="12" data-title="⇐⊚⇒"></div>
    </div>

撕裂404页面动画

一个404错误页面模板，其特征是一张纸被撕成两半以表示一个破损的页面。

点击预览获取

在这里插入图片描述
核心代码

<main>
        <div>
            <svg class="paper" viewBox="0 0 300 300" width="300px" height="300px" role="img"
                aria-label="A piece of paper torn in half">
                <g class="paper__outline" fill="none" stroke="hsl(0,10%,10%)" stroke-width="8" stroke-linecap="round"
                    stroke-linejoin="round" transform="translate(61,4)">
                    <g class="paper__top" transform="translate(0,25)">
                        <polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none"
                            points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138"
                            transform="translate(-12,12)" />
                        <rect class="paper__tear-fill" fill="hsl(0,0%,100%)" stroke="none" x="0" y="137" width="0"
                            height="23px" />
                        <polygon class="paper__fill" fill="hsl(0,0%,100%)" stroke="none"
                            points="0 148,0 0,137 0,187 50,187 148,155 138,124 148,93 138,62 148,31 138" />
                        <polygon class="paper__shadow" fill="hsl(0,10%,70%)" stroke="none"
                            points="137 0,132 55,187 50,142 45" />
                        <polyline points="137 0,142 45,187 50" />
                        <polyline points="0 148,0 0,137 0,187 50,187 148" />
                        <g class="paper__lines" stroke="hsl(0,10%,70%)">
                            <polyline points="22 88,165 88" />
                            <polyline points="22 110,165 110" />
                            <polyline points="22 132,165 132" />
                        </g>
            </svg>
        </div>
        <div>
            <h1>404</h1>
            <p>We couldn’t find the page you were looking for. It may have been moved, or it just doesn’t exist.</p>
            <a class="btn-link" href="#">Go Back Home</a>
        </div>
    </main>

3D悬停视觉差效果

当鼠标悬停移入卡片内卡片会倾向于鼠标的方位同时呈现一种3D的效果

点击预览获取

在这里插入图片描述
核心代码

<img src="./image/1.png" alt="the back of random person">
<img src="./image/2.png" alt="an eagle" style="--f:.12;--r:5px">
<img src="./image/3.png" alt="a cup of something to drink, probably some tea" style="--f:.08;--r:20px">

发光开/关切换按钮特效

点击开关按钮时按钮边缘会发出一丝清晰可见的光线

点击预览获取

在这里插入图片描述
核心代码

 <div class="col">
            <button id="btn1" class="btn" type="button" aria-pressed="false">
                <svg class="btn__icon" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
                    <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <polyline points="12,1 12,10" />
                        <circle fill="none" cx="12" cy="13" r="9" stroke-dasharray="49.48 7.07"
                            stroke-dashoffset="10.6" />
                    </g>
                </svg>
                <span class="btn__sr">Power (Light)</span>
            </button>
        </div>

卡片悬停响应式交互特效

卡片悬停响应式交互特效适用于卡片或名片介绍模块使用

点击预览获取

在这里插入图片描述

核心代码

 <div class="card" style="--clr: #009688">
            <div class="img-box">
                <img src="./image/1.png">
            </div>
            <div class="content">
                <h2>Leafs</h2>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                    Architecto, hic? Magnam eum error saepe doloribus corrupti
                    repellat quisquam alias doloremque!
                </p>
                <a href="#">Read More</a>
            </div>
        </div>

Svg文本笔划动画

CSS SVG文本笔划动画会将文字从无到有通过笔划类似的方式绘制出来非常的炫酷同时当绘制完成后你还可以点击按钮进行重新的绘制

点击预览获取

在这里插入图片描述
核心代码

<main class="text-container">
        <svg class="text-stroke" viewBox="0 0 500 100" width="80%" height="100%">
            <text class="text" x="20" y="75">JQUERY</text>
        </svg>
 </main>
 <button class="reset">Restart the Animation</button>

文字极光动画特效

一款非常漂亮的文字特效简单又美观

点击预览获取

在这里插入图片描述
核心代码

 <div class="content">
        <h1 class="title">the beautiful aurora
            <div class="aurora">
                <div class="aurora__item"></div>
                <div class="aurora__item"></div>
                <div class="aurora__item"></div>
                <div class="aurora__item"></div>
            </div>
        </h1>
        <p class="subtitle">Made with love and only the CSS.</p>
    </div>