欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

酷炫又有趣！14款特效源码大放送，附带源码和实际操作效果展示

最编程 2024-02-15 18:31:26
...

分享14款还不错的前端特效源码 其中包含jQuery特效 也包含svg特效 以及可以用来摸鱼的几款小游戏等 下面我会列出相对核心的代码 同时你也可以点击预览获取查看该源码资源的最终展示效果 以及下载该源码资源

可变主题切换效果

一款可变主题的切换特效 你既可以点击右上角图标进行主题的切换 同时也可以点击按钮及某个主题区域进行主题的切换

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可变主题切换效果</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="c-card">
        <button class="c-theme" id="themePicker"></button>
        <h1 class="c-card__title">Variable Themes</h1>
        <p class="c-card__description">Cycle through 4 themes, from darkest to lightest.</p>
        <div class="c-theme-grid" id="themeGrid"></div><a class="c-button" id="button">Cycle Theme</a>
    </div>
    <script src="./script.js"></script>
</body>

</html>

CSS齿形切换开关动画

非常有创意性的一款纯css实现的齿形切换开关特效 可用于一些博客中一些有趣性的展示区

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS齿形切换开关动画</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="content">
        <input type="checkbox" id="btn">
        <label for="btn">
            <span class="track">
                <span class="track-top">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
                <span class="track-bot">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </span>
            <span class="thumb"></span>
        </label>
        <div class="lights">
            <span class="light-off"></span>
            <span class="light-on"></span>
        </div>
    </div>
</body>

</html>

数码管时钟特效

数码管时钟特效 是一款切换时钟特效 点击下方红点 会显示当前的具体时间 从上往下依次代表的是时、分、月、日、年

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数码管时钟</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <svg id="noise-svg">
        <filter id='noiseFilter'>
            <feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch' />
        </filter>
        <rect id="noise-rect" filter='url(#noiseFilter)' />
    </svg>

    <div class="clock off">
        <div class="shadow"></div>
        <div class="base-container">
            <div class="base">
                <div></div>
            </div>
        </div>
        <div class="small-outer-pipe">
            <div class="small-inner-pipe"></div>
        </div>
        <div class="outer-pipe">
            <div class="inner-pipe"></div>
        </div>
        <div class="pipe-accents">
            <div class="top-tube"></div>
            <div class="tube-holders">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="top"></div>
            <div class="topinset"></div>
            <div class="left">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="right">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="bottom-left"></div>
            <div class="bottom-right"></div>
        </div>
        <div class="display">
            <div class="row">
                <div class="col">
                    <div>8</div>
                    <div id="char21">0</div>
                    <div id="char22">0</div>
                </div>
                <div class="col">
                    <div>8</div>
                    <div id="char31">0</div>
                    <div id="char32">0</div>
                </div>
            </div>
            <div style="height: 0.2em;"></div>
            <div class="small-row">
                <div class="row">
                    <div class="col">
                        <div>8</div>
                        <div id="char41">0</div>
                        <div id="char42">0</div>
                    </div>
                    <div class="col">
                        <div>8</div>
                        <div id="char51">0</div>
                        <div id="char52">0</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div>8</div>
                    <div id="char81">0</div>
                    <div id="char82">0</div>
                </div>
                <div class="col">
                    <div>8</div>
                    <div id="char91">0</div>
                    <div id="char92">0</div>
                </div>
            </div>
        </div>

        <div class="glass-tube"></div>
        <div class="hex">
            <div class="overlay"></div>
        </div>

        <div class="tube-base-container">
            <div class="wires">
                <div></div>
                <div></div>
            </div>
            <div class="tube-base"></div>
            <div class="rods">
                <div class="left-rod"></div>
                <div class="center-rod"></div>
                <div class="right-rod"></div>
            </div>
            <div class="tube-btm"></div>
        </div>

        <div class="power-cord">
            <div></div>
            <div></div>
        </div>

        <div class="button" onclick="body.querySelector('.clock').classList.toggle('off')">
            <div></div>
        </div>
    </div>
    <script src="./js/script.js"></script>
</body>

</html>

css滑动显示特效

css滑动显示特效 当鼠标移入某格时 会显示当前格的内容 鼠标移出时会显示模糊的星点

预览获取

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css滑动显示特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <p>Glide To Reveal Secret Code</p>
        <ul class="code">
            <li tabindex="0" class="digit">
                <span>0</span>
            </li>
            <li tabindex="0" class="digit">
                <span>3</span>
            </li>
            <li tabindex="0" class="digit">
                <span>4</span>
            </li>
            <li tabindex="0" class="digit">
                <span>8</span>
            </li>
            <li tabindex="0" class="digit">
                <span>7</span>
            </li>
            <li tabindex="0" class="digit">
                <span>2</span>
            </li>
        </ul>
    </section>
</body>

</html>

css心跳监控器特效

使用 CSS 剪辑路径属性创建检测信号，计算机心跳监视器动画。

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css心跳监控器特效</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="monitor">0.0 0.0</div>
</body>
</html>

canvas四面体粒子动画特效

canvas实现的一款粒子动画特效 球体中会出现烟花燃放的动画和球体爆炸的特效

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas四面体粒子动画特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id=c></canvas>

    <script src="./script.js"></script>
</body>

</html>

类星体探险家

canvas实现的一款炫酷背景特效

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类星体探险家</title>
</head>

<body>
    <div></div>
</body>
</html>

svg多边形路径动画特效

svg多边形路径动画特效 多边形中的点 会绕着线条路径进行循环的运动 同时上方还有一个控制速度的滑块 可以用来调节运动的快慢

预览获取

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg多边形路径动画特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="controls">
        <label for="animationSpeed">Animation Speed</label><br>
        <input type="range" id="animationSpeed" min="0.001" max="0.002" step="0.0001" value="0.001">
    </div>
    <script src="./script.js"></script>
</body>
</html>

霓虹灯按钮拨动特效

SVG CSS霓虹灯拨动开关,当你激活时，开关将被一个霓虹轮廓包围!

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯按钮拨动特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <label class="switch">
        <input class="switch__input" type="checkbox" role="switch">
        <span class="switch__base-outer"></span>
        <span class="switch__base-inner"></span>
        <svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px">
            <defs>
                <filter id="switch-glow">
                    <feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur>
                    <feMerge>
                        <feMergeNode in="coloredBlur"></feMergeNode>
                        <feMergeNode in="SourceGraphic"></feMergeNode>
                    </feMerge>
                </filter>
                <linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" />
                    <stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" />
                </linearGradient>
                <linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1">
                    <stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" />
                    <stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" />
                    <stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" />
                </linearGradient>
            </defs>
            <path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1"
                stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round"
                d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z" />
        </svg>
        <span class="switch__knob-shadow"></span>
        <span class="switch__knob-container">
            <span class="switch__knob">
                <svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px">
                    <circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19"
                        stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24"
                        transform="rotate(-112.5,24,24)" />
                </svg>
            </span>
        </span>
        <span class="switch__led"></span>
        <span class="switch__text">Power</span>
    </label>
</body>

</html>

css闪亮的动画边框渐变特效

css闪亮的动画边框渐变特效

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css闪亮的动画边框渐变特效</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button>
        <div>
            A beautiful button
        </div>
    </button>
</body>

</html>

js拖拽切换选项卡

js拖拽切换选项卡 你可以通过拖拽的方式随意切换选项卡的位置

预览获取

在这里插入图片描述

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现拖拽排序</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Sortable/1.14.0/Sortable.min.js"></script>

    <div id="team-members">
        <article class="team-member"><img class="team-member-avatar" src=""
                alt="Team Member" />
            <div 
																				

						

							上一篇：							
								理解回归分析中的关键统计量							
						

						

							下一篇：							
								玩转SAS高级统计（2）：多元线性回归详解——DW值和数学模型解析							
						

					

															

						

							推荐阅读