六个拿来就能用的有趣网页特效

已于 2022-06-30 11:26:37 修改
阅读量3.2w 收藏 1.1k
点赞数 195
分类专栏： CSS 文章标签： 前端 html javascript css 特效
于 2022-04-18 15:07:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53321320/article/details/124241666
版权

上学期写大作业时收集的一些拿来直接用的网页特效，我还用服务器生成了 script 链接，只需一条标签就可以使用啦，如果你觉得这样会影响网站加载速度，没关系，你可以将其下载下来使用

在这里插入图片描述

文章目录

1. 看板娘

效果预览

在这里插入图片描述
代码

<!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>
    <!-- 看板娘 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>
</html>

2. 鼠标点击出现自定义文字

效果预览
在这里插入图片描述

引入jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

引入js

<script src="http://zhouql.vip/cdn/click1.js"></script>

代码

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            height: 100vh;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body style="width: 100%;height: 100%;">
    <div></div>
    <script src="http://zhouql.vip/cdn/click1.js"></script> 
</body>
</html>

3. 樱花飘落特效

效果预览
在这里插入图片描述
代码

<!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>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/static/js/sakura-less.js"></script>
</body>

</html>

4. 小猫返回顶部

效果预览
在这里插入图片描述

代码

源码下载

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回顶部</title>
    <link rel="stylesheet" type="text/css" href="http://zhouql.vip/cdn/css/szgotop.css" />
</head>

<body style="height: 2000px;">
    <div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="http://zhouql.vip/cdn/szgotop.js"></script> 
</body>

</html>

5. 可爱登录

效果预览
在这里插入图片描述

在线访问

点击这里

文件目录
在这里插入图片描述
图片素材

素材
素材

html

<!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>
    <!-- bootstrap4图标库引入 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <!-- css文件引入 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 网站图标 -->
    <link rel="shortcut icon" href="http://zhouql.vip/images/tou/t1.png" type="image/x-icon">
</head>

<body>
    <div id="app">
        <form action="" method="get">
            <button></button>
            <h2>手机登录</h2>
            <p><input type="text" name="" autofocus id="phone" placeholder="请输入手机号"></p>
            <p><input type="password" name="" id="pwd" placeholder="验证码"></p>
            <p><input type="submit" value="登录"></p>
            <a href="">其他登录方式</a>
            <p><span>注册登录即表示同意 <small>用户协议，隐私政策</small></span></p>
        </form>
        <img class="t1" src="./images/4f6f6f316cde4398d201cd67e44ddea3.svg" alt="">
        <img class="t2" src="./images/500c1180a96859e5c54a5359f024a397.svg" alt="">
    </div>
    <script>
        document.querySelector('#phone').addEventListener('focus',function(){
            document.querySelector('.t2').style.display = "block";
        });
        document.querySelector('#phone').addEventListener('blur',function(){
            document.querySelector('.t2').style.display = "none";
        });
        document.querySelector('#pwd').addEventListener('focus',function(){
            document.querySelector('.t1').style.display = "block";
        });
        document.querySelector('#pwd').addEventListener('blur',function(){
            document.querySelector('.t1').style.display = "none";
        });
        document.querySelector('button').addEventListener('click',function(e){
            document.body.style.backgroundColor = "#fff";
            document.querySelector('#app').style.display = "none";
            e.preventDefault();
        });
    </script>
</body>

</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #aaabab;
}
#app{
    position: relative;
    height: 290px;
    width: 350px;
    background-color: #fff;
}
#app form{
    position: relative;
    padding: 20px;
}
#app form h2{
    color: #333333;
    font-size: 18px;
    user-select: none;
}
#app form p input{
    width: 100%;
    height: 38px;
    color: #828282;
    border: 1px solid #ddd;
    padding-left: 8px;
    margin-top: 18px;
    border-radius: 2px;
    outline: none;
}
#app form p:nth-of-type(3) input{
    background-color: #007fff;
    color: #edf6ff;
}
#app form a{
    text-decoration: none;
    color: #198fff;
    margin: 10px 0;
    display: inline-block;
    font-size: 15px;
}
#app form p span{
    margin-top: 10px;
    font-size: 14px;
    color: #847f7a;
}
#app form p span small{
    font-size: 14px;
    color: #198fff;
}
button{
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}
button::after{
    font-family: "bootstrap-icons";
    content: '\F62A';
    font-size: 24px;
    color: #afafaf;
}
#app img{
    position: absolute;
    width: 100px;
    
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
#app img:nth-of-type(1){
    top: -64px;
}
#app img:nth-of-type(2){
    top: -62px;
}

6. 点击爆炸

效果预览
在这里插入图片描述
引入

<!--给网站添加鼠标点击爆炸五颜六色特效-->
<script src="http://zhouql.vip/cdn/blast.js"></script>
王子周棋洛
关注
  • 195
    点赞
  • 踩
  • 1101
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 75
    评论
专栏目录
PC端常见网页特效
m0_45659764的博客
05-06 841
5.常见网页特效案例 案例：网页轮播图 轮播图也称为焦点图，是网页中比较常见的网页特效 注意： 为了保证所有的li能在一行显示，必须保证ul足够大 注意：因为页面中相同元素较多，所以获取元素的时候尽量要准确 注意： 因为index.js里面需要用到animate.js，所以animate.js要在index.js上面引入，确保先有animate.js再有index.js 必须给ul设置定位，因为真正移动的是ul ul的移动距离是负值 ...
H5点击网页彩色粒子爆炸特效特效代码
03-20
H5点击网页彩色粒子爆炸特效是一款HTML5 Canvas实现的酷炫彩色的粒子爆炸飞散动画特效。
十个拿来就能用的网页炫酷特效
2401_84048671的博客
04-20 1351
光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性。
各种各样好看的网页特效
04-25
各种各样的特效，适用于做各种各样的背景尤其是OA系统的背景，特效不下20个，本人目前已经使用了2个，效果不错，本人上传至CSDN，用于方便自己使用
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气设计类静态网站|自适应响应式|自制超简单的美术公司网页|直接可以修改使用|适合新手超友好易上手新手必
最新发布
南北极之间
06-15 1059
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气美术设计静态网站|自制超简单的美术类网页，响应式自适应新手友。
【UI】前端常用特效
amoureux555的博客
02-02 2032
前端常用特效 文字水波纹特效、按钮按动特效、看板娘特、粒子特效、18款好看的纯css 标题栏、92款超级漂亮的css按钮样式 复制即用
10个炫酷特效的网页写法（附源码），拿去就能用，nice
热门推荐
王春燕的博客
04-26 7万+
这是借鉴其他博主的，觉得挺实用的，给网页加个背景，给鼠标加个特效，这些“使用简单”，“效果爆炸”的页面，分享给大家，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了。 目录 1、鼠标点击弹出爱心 2、鼠标点击弹出文字 3、鼠标点击弹出烟花波纹 4、鼠标小星星拖尾跟随 5、鼠标粒子随心拖尾跟随 6、鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果（自由组合） 7、樱花特效 8、蜘蛛网特效 9、看板娘（左下角的小人） 10、烟花 1、鼠标点击弹出爱心 代码 &l
❤ 十一个拿来就能用的网页炫酷特效
林太白
05-26 2964
❤ 十一个拿来就能用的网页炫酷特效。
百款拿来就能用的网页特效,不来看看吗？
q1551255081的博客
07-20 1493
网页特效
拿来就能用的网页炫酷特效、11个拿来就可以用的网页特效
05-26
11个拿来就可以用的网页特效11个拿来就可以用的网页特效 11个拿来就可以用的网页特效 11个拿来就可以用的网页特效 11个拿来就可以用的网页特效 11个拿来就可以用的网页特效 11个拿来就可以用的网页特效 11个拿来就...
60个网页特效(js+flash)
11-03
总的来说，这个压缩包中的60个特效涵盖了JavaScript和Flash在Web前端开发中的广泛应用，对于开发者来说，这是一份宝贵的资源库，可以帮助他们快速实现各种交互效果，提升网站的质量和用户体验。学习和研究这些例子，...
10个经典的网页鼠标特效代码
08-28
本资源提供了10个经典的网页鼠标特效代码，涵盖了鼠标指向出现实用特殊提示、悬停效果、下拉菜单、搜索框特效等多种常见的鼠标特效。这些代码都是经过编译和解释的，可以直接应用于实际项目中。 知识点一：鼠标指向...
整理1500个JS特效源码
02-04
在这个名为"1500个JS特效源码"的资源中，包含了丰富的JavaScript特效示例，涵盖了网页设计中的多种常见效果。 首先，我们要了解JS特效在网页开发中的重要性。JavaScript可以处理用户输入、控制多媒体、进行动画制作...
61个时尚网页特效
05-31
在网页设计和开发中，视觉效果和用户体验是至关重要的元素，而“61个时尚网页特效”这个资源正为此提供了丰富的素材。这个压缩包包含了多种类型的网页特效，可以帮助开发者提升网站的吸引力和互动性。下面将详细介绍...
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
精心整理的10套最美Web前端新年特效--提前祝大家新年快乐
BYGFJ的博客
01-25 3065
亲爱的小伙伴们，2022年春节就快到了！~ 在这里祝各位程序员朋友2022年身体健康,代码没有bug,不用996、远离ICU。 今天给大家精心整理了10套最美前端新年特效！提前祝大家新年快乐呀！！！！ 2022炫酷新年快乐html网页特效: 一款效果超级炫酷的2022新年快乐html网页特效，霓虹的城市夜景和绚烂的烟花很是特别，页面还有交互效果，点击鼠标就会呈现烟花绽放的特效，唯美不过如此。 2022烟花背景新年快乐html网页特效： 2022已经正式来临，距离中国人的农历...
前端网页特效
blog_pancc的博客
04-27 585
将这个函数作为参数传到另一个函数里面，当另一个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。(可视区),client相关属性来获取元素的可视区的信息,通过client的相关属性可以动态的获取到元素的边框大小、元素大小等。较好，不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。scroll系列的相关属性可以动态的获得元素的大小,滚动距离等。
html网页特效源代码
07-03
### 回答1： HTML网页特效源代码是一组用于实现网页特效的HTML代码。这些源代码可以包括CSS样式和JavaScript脚本，用于创建各种各样的动画、过渡和交互效果，使网页更具吸引力和互动性。 其中，CSS样式用于定义元素的外观和排版效果。通过为元素添加不同的CSS类和属性，可以改变元素的背景颜色、字体样式、边框等，从而实现网页特效要求的各种效果。 JavaScript脚本则用于实现更复杂的交互和动画效果。通过使用JavaScript库和框架，例如jQuery和React等，开发人员可以通过编写代码来控制元素的动态行为和效果。例如，通过操纵元素的位置、大小、透明度和旋转等属性，可以实现元素的平滑滚动、淡入淡出效果以及鼠标悬停时的交互反应。 根据具体需求，html网页特效源代码可以包括各种各样的特效，例如图片轮播、折叠菜单、模态框、视差滚动和动画效果等。这些特效源代码可以从网络上的开源代码库或开发者社区获取，也可以根据需求自行编写。 总之，HTML网页特效源代码是用于实现网页各种特效的一组HTML、CSS和JavaScript代码。通过运用这些源代码，开发人员可以为网页添加丰富多样的特效效果，提升用户体验。 ### 回答2： HTML网页特效源代码指的是在HTML网页中添加一些动态、交互和视觉效果的代码，以提升网页的用户体验和吸引力。下面是一个简单的例子-点击按钮弹出提示框的HTML源代码： ```html <!DOCTYPE html> <html> <head> <title>网页特效示例</title> <style> .button { padding: 10px 20px; background-color: #4CAF50; color: white; border-radius: 4px; cursor: pointer; } </style> <script> function showAlert() { alert("Hello, World!"); } </script> </head> <body> <h1>点击按钮弹出提示框</h1> <button class="button" onclick="showAlert()">点击我</button> </body> </html> ``` 在这个例子中，我们首先定义了一个样式类`.button`，用于设置按钮的样式。接着定义了一个JavaScript函数`showAlert()`，当按钮被点击时将调用此函数。最后，在按钮的`onclick`属性中绑定了`showAlert()`函数，表示点击按钮时执行该函数。 当用户在浏览器中打开这个HTML文件时，会看到一个标题为"点击按钮弹出提示框"的网页。当用户点击按钮时，将弹出一个提示框，其中显示的内容是"Hello, World!"。点击提示框上的“确定”按钮，提示框将关闭。 这只是HTML网页特效源代码的一个简单例子，实际上可以实现更多复杂的效果。通过结合HTML、CSS和JavaScript，我们可以为网页添加各种各样的动态效果、过渡效果、悬停效果、轮播效果等，以增强用户对网页的互动和视觉体验。 ### 回答3： HTML网页特效是指通过在网页中添加特定的HTML代码或者引入外部的CSS、JavaScript文件，使网页具有一些特殊的效果， 提升用户体验和页面的吸引力。 常见的HTML网页特效包括但不限于以下几种： 1. 图片轮播：通过CSS和JavaScript实现，实现图片的自动轮播或者手动切换的效果，使网页更加生动有趣。 2. 鼠标交互效果：通过CSS设置鼠标悬停或点击元素时的特殊效果，例如改变背景颜色、放大缩小、旋转等，增加用户和页面的交互性。 3. 页面滚动效果：通过JavaScript实现页面滚动时的特效，如导航栏随着滚动固定在页面顶部、滚动到指定位置时出现特效等，让页面更加流畅和有层次感。 4. 下拉菜单：通过HTML和CSS实现，当鼠标悬停或点击菜单时，展示隐藏的子菜单选项，提升网页的可用性和导航效果。 5. 表单验证效果：通过JavaScript实现对用户输入内容的验证，例如输入框的输入格式、必填项的验证等，提醒用户输入内容是否合法。 6. 动画效果：通过CSS3实现各种动画效果，如旋转、淡入淡出、弹跳等，使页面更加生动有趣。 7. 响应式布局：通过CSS媒体查询和弹性布局实现自适应不同屏幕大小的特效，保证在不同设备上都能呈现良好的页面效果。 以上只是一小部分HTML网页特效，实际上还有很多种类和方式。在实现这些特效时，开发者可以借助已有的开源代码、框架或者自己编写CSS和JavaScript代码。请注意，在使用特效时要保证页面的加载速度和兼容性，避免特效影响用户体验或者在部分设备和浏览器上无法正常显示。
评论 75
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王子周棋洛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值