10款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码）
2023-12-13 18:16:33
分享10款还不错的前端特效源码 其中包含jQuery特效 也包含svg特效 以及可以用来摸鱼的几款小游戏等 下面我会列出相对核心的代码 同时你也可以点击预览获取查看该源码资源的最终展示效果 以及下载该源码资源
JQuery鼠标悬停切换视频背景
这是一款jQuery鼠标悬浮渐变切换视频背景特效 当你鼠标移动到123其中某个区域时 就会播放某个区域内的视频背景 还是很不错的 毕竟难免开发中就会存在此需求
核心代码
<!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">
<title>鼠标悬浮渐变切换视频背景</title>
</head>
<body>
<div class="video-box">
<div class="item">
<span>1</span>
<video id="videos0" autoplay muted loop>
<source src="https://nie.v.netease.com/r/video/20220121/fc6becb0-b3be-4937-8dcf-aa950a1a01f1.mp4" type="video/mp4">
</video>
</div>
<div class="item">
<span>2</span>
<video id="videos1" autoplay muted loop>
<source src="https://mc.v.netease.com/r/video/20210204/d01bbccd-dd92-4a15-a178-b3e93a725dcc.mp4" type="video/mp4">
</video>
</div>
<div class="item">
<span>3</span>
<video id="videos2" autoplay muted loop>
<source src="https://yys.v.netease.com/qita/CGkaichang.mp4" type="video/mp4">
</video>
</div>
</div>
</body>
</html>
jQuery仿电脑蜘蛛纸牌游戏
这是一款jQuery仿电脑蜘蛛纸牌游戏代码是一款jQuery基于CSS3制作的WINDOWS7系统电脑自动的蜘蛛纸牌游戏。
核心代码
<!DOCTYPE html>
<html>
<head>
<title>jQuery仿电脑蜘蛛纸牌游戏代码</title>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="webkit" name="renderer" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Title" name="apple-mobile-web-app-title" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="True" name="HandheldFriendly" />
<link rel="stylesheet" href="css/public.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="gameView" id="gameView">
<div class="gameBg"></div>
<div class="pokerBox" id="pokerBox"></div>
</div>
</body>
</html>
鼠标移动鸟瞰视差特效
基于js实现的一款鼠标移动特效动画 视觉会随着你移动鼠标的位置而发生变化 非常有意思
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移动鸟瞰视差特效</title>
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div id="root"></div>
<script src='static/js/react.production.min.js'></script>
<script src='static/js/react-dom.production.min.js'></script>
<script src='static/js/anime.min.js'></script>
<script src="static/js/script.js"></script>
</body>
</html>
环形数字时钟进度动画特效
基于svg实现的数字时钟特效 它会根据时间的变化 改变环形圈的进度 还是非常的有特色的
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>环形动画进度数字时钟</title>
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div id="clock" class="progress-clock">
<button class="progress-clock__time-date" data-group="d" type="button">
<small data-unit="w">Sunday</small><br>
<span data-unit="mo">January</span>
<span data-unit="d">1</span>
</button>
<button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">12</button><span
class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m"
data-group="m" type="button">00</button><span class="progress-clock__time-colon">:</span><button
class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">00</button>
<span class="progress-clock__time-ampm" data-unit="ap">AM</span>
<svg class="progress-clock__rings" width="256" height="256" viewbox="0 0 256 256">
<defs>
<lineargradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(343,90%,55%)"></stop>
<stop offset="100%" stop-color="hsl(323,90%,55%)"></stop>
</lineargradient>
<lineargradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(43,90%,55%)"></stop>
<stop offset="100%" stop-color="hsl(23,90%,55%)"></stop>
</lineargradient>
<lineargradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(223,90%,55%)"></stop>
<stop offset="100%" stop-color="hsl(203,90%,55%)"></stop>
</lineargradient>
<lineargradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(283,90%,55%)"></stop>
<stop offset="100%" stop-color="hsl(263,90%,55%)"></stop>
</lineargradient>
</defs>
<!-- Days of Month -->
<g data-units="d">
<circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1"
stroke="url(#pc-red)" stroke-width="12"></circle>
<circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none"
stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465"
stroke-linecap="round" transform="rotate(-90,128,128)"></circle>
</g>
<!-- Hours of Day -->
<g data-units="h">
<circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1"
stroke="url(#pc-yellow)" stroke-width="12"></circle>
<circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none"
stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5"
stroke-linecap="round" transform="rotate(-90,128,128)"></circle>
</g>
<!-- Minutes of Hour -->
<g data-units="m">
<circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1"
stroke="url(#pc-blue)" stroke-width="12"></circle>
<circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none"
stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666"
stroke-linecap="round" transform="rotate(-90,128,128)"></circle>
</g>
<!-- Seconds of Minute -->
<g data-units="s">
<circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1"
stroke="url(#pc-purple)" stroke-width="12"></circle>
<circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none"
stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5"
stroke-linecap="round" transform="rotate(-90,128,128)"></circle>
</g>
</svg>
</div>
<script src="static/js/script.js"></script>
</body>
</html>
商品手风琴切换网页特效
一款基于jQuery实现的手风琴特效 还是非常适用于商城商品切换的动画效果 让网站更具有互动感
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品手风琴切换网页特效</title>
<link rel="stylesheet" href="static/css/style.css">
<script src="static/js/prefixfree.min.js"></script>
</head>
<body>
<body class="grid">
<main class="grid" style="--n: 3; --k: 0">
<article class="grid" id="a0" style="--i: 0">
<h3 class="c--ini fade">Murder Fantasies</h3>
<p class="c--ini fade">Spends her days observing you from the shadows, sharpening her claws and weaving
elaborate plans to murder you.</p><a class="nav c--ini fade" href="#a1">Next: Silent Killer</a>
<section class="grid c--fin" role="img" aria-label="photo of previously described cat"
style="--img: url(https://images.unsplash.com/photo-1589201300932-34103827a3ea?w=800); --m: 8">
<div class="slice" aria-hidden="true" style="--j: 0"></div>
<div class="slice" aria-hidden="true" style="--j: 1"></div>
<div class="slice" aria-hidden="true" style="--j: 2"></div>
<div class="slice" aria-hidden="true" style="--j: 3"></div>
<div class="slice" aria-hidden="true" style="--j: 4"></div>
<div class="slice" aria-hidden="true" style="--j: 5"></div>
<div class="slice" aria-hidden="true" style="--j: 6"></div>
<div class="slice" aria-hidden="true" style="--j: 7"></div>
</section><a class="det grid c--fin fade" href="#">Learn more</a>
</article>
</main>
</body>
<script src="static/js/script.js"></script>
</body>
</html>
jQuery滚动式幸运抽奖机
jQuery可无缝滚动，停止和开始均为分开控制 在团建或者年终的活动中还是非常实用的
<!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">
<title>jQuery滚动式幸运抽奖机</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<div class="wrap">
<img class="core" src="./images/core.png" />
<img class="btn" src="./images/btnStart.png" />
<div class="num num1">
<div class="num-con num-con1">
<ul class="list">
<li class="item">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
<ul class="list">
<li class="item">0</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
</div>
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
3D立体方块时钟特效
基于CSS实现的3D立体方块时钟特效 不仅能实时的显示当前的时间 还具有空间感 让人眼前一亮
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D立体方块时钟特效</title>
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id='wrap'>
<div class='block cube0'>
<div class='cube'>
<div class='side'></div>
<div class='side'></div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>
<filter id="squiggles">
<feturbulence id="turbulence" basefrequency="0.03" numoctaves="3" result="noise" seed="0"></feturbulence>
<fedisplacementmap id="displacement" in="SourceGraphic" in2="noise" scale="4"></fedisplacementmap>
</filter>
</defs>
</svg>
<script src="static/js/script.js"></script>
</body>
</html>
js简易飞机大战
js面向对象飞机大战源码，代码注释全 一款娱乐性的源码 它有记分的系统 你可以分享给好友一起玩 既能享受到快乐 又能增进好友间的友谊
核心代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>js简易飞机大战</title>
<link href="./css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="box">
<div id="level">
<h1>星空飞机大战</h1>
<p>开始</p>
</div>
<div id="map">
<div id="BiuAll"></div>
</div>
<div id="score">0</div>
<div id="restart">
<p class="p1">得分：<span>0</span></p>
<p class="p3">再来一局</p>
</div>
</div>
<script src="./js/myGame.js"></script>
</body>
</html>
襄阳市景点分布及购票人数
在地图上根据经纬度显示景点位置，并通过标签显示购票人数，支持进入下一级地图和返回上一级地图
核心代码
<div style="position: relative; margin: auto; text-align: center; width: 100%; height: 600px;">
<div id="backMap" style="text-align: right; position: absolute; top: 30px; right: 14px; z-index: 1;">
<img src="地址"
style="cursor: pointer;">
</div>
<div id="echart" style="width: 100%; height: 95%; margin: auto;">
</div>
<h3>双击进入下一级，单击呈现选中状态</h3>
</div>
jQuery数字滚动插件rollNumber
简单实用的jQuery数字滚动插件rollNumber
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery数字滚动插件rollNumber</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport" />
<style>
body {
min-height: 60vh;
background: #333333;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
}
.content-item {
width: 36px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 22px;
font-family: PangMenZhengDao;
font-weight: bold;
color: #12F6FE;
background: rgba(11, 51, 107, 0);
border: 1px solid #00FFF6;
}
.content-item+.content-item {
margin-left: 4px;
}
</style>
<link rel="stylesheet" href="./rollNumber/index.css">
</head>
<body>
<div id="rollNumberList" class="content">
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
<div class="content-item">0</div>
</div>
<script src="./jquery/jquery-1.10.2.js"></script>
<script src="./rollNumber/index.js"></script>
<script>
let num = 300
let update = $("#rollNumberList").rollNumber({ num })
setInterval(() => {
update(num += Math.floor(Math.random() * (4000 - 3000) + 3000))
}, 3000)
</script>
</body>
</html>
以上就是文章的所有内容 详细源码可通过预览获取 点赞收藏 不迷路.
文章来源:https://blog.csdn.net/qq_50594742/article/details/134974493
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！