Javascript Web网页特效 收录大全

最新推荐文章于 2024-02-04 01:09:47 发布
最新推荐文章于 2024-02-04 01:09:47 发布
阅读量3.6k 收藏 23
点赞数 3
分类专栏： css3动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingrome2017/article/details/79356952
版权

前言

本编文章纯属个人形为，如果对您有帮助将不胜感激。

canvas 实例

这里写图片描述

注意！注意！下载链接

关于背景图片切换动画 实例

这里写图片描述

百度联盟

阿里云 动画实例

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0; padding:0; font-family: "微软雅黑"; font-size:12px; color:#333;}
        section{width:150px; height:150px; position: fixed; top:0; right:0; bottom:0; left:0; margin:auto;}
        .point-area {
            text-align: center;
            position: relative;
            width: 150px;
            height: 150px;
            -webkit-transition: opacity .5s ease-out;
            -ms-transition: opacity .5s ease-out;
            transition: opacity .5s ease-out;
        }
        a{color: #00c1de;}

        .point-area .point {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 10px;
             height: 10px; 
            margin: auto;
            -webkit-border-radius: 50%;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 50%;
            -moz-background-clip: padding;
            border-radius: 50%;
            background-clip: padding-box;
            background: transparent;
        }
        .point-area .point-dot {
            z-index: 1;
            background-color: #6ad7e9;
            border: 1px solid rgba(0,205,236,.37);
        }
        .point-area .point-10:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 225ms infinite;
            -ms-animation: ripple 4.5s ease-out 225ms infinite;
            animation: ripple 4.5s ease-out 225ms infinite;
        }
        .point-area .point-40:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out .9s infinite;
            -ms-animation: ripple 4.5s ease-out .9s infinite;
            animation: ripple 4.5s ease-out .9s infinite;
        }
        .point-area .point-80:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
            -ms-animation: ripple 4.5s ease-out 1.8s infinite;
            animation: ripple 4.5s ease-out 1.8s infinite;
        }
        .point-area .point-shadow:after {
            box-shadow: inset 0 0 5em rgba(0,205,236,.16);
        }
        .point-area .point-10 {
            width: 100%;
            height: 100%
        }



        .point-area .point-20 {
            width: 100%;
            height: 100%
        }


        .point-area .point-30 {
            width: 100%;
            height: 100%
        }
        .point-area .point-30:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 675ms infinite;
            -ms-animation: ripple 4.5s ease-out 675ms infinite;
            animation: ripple 4.5s ease-out 675ms infinite
        }

        .point-area .point-40 {
            width: 100%;
            height: 100%
        }

        .point-area .point-50 {
            width: 100%;
            height: 100%
        }

        .point-area .point-50:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 1125ms infinite;
            -ms-animation: ripple 4.5s ease-out 1125ms infinite;
            animation: ripple 4.5s ease-out 1125ms infinite
        }

        .point-area .point-60 {
            width: 100%;
            height: 100%
        }

        .point-area .point-60:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 1.35s infinite;
            -ms-animation: ripple 4.5s ease-out 1.35s infinite;
            animation: ripple 4.5s ease-out 1.35s infinite
        }

        .point-area .point-70 {
            width: 100%;
            height: 100%
        }

        .point-area .point-70:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 1575ms infinite;
            -ms-animation: ripple 4.5s ease-out 1575ms infinite;
            animation: ripple 4.5s ease-out 1575ms infinite
        }

        .point-area .point-80 {
            width: 100%;
            height: 100%
        }

        .point-area .point-80:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
            -ms-animation: ripple 4.5s ease-out 1.8s infinite;
            animation: ripple 4.5s ease-out 1.8s infinite
        }

        .point-area .point-90 {
            width: 100%;
            height: 100%
        }

        .point-area .point-90:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 2025ms infinite;
            -ms-animation: ripple 4.5s ease-out 2025ms infinite;
            animation: ripple 4.5s ease-out 2025ms infinite
        }

        .point-area .point-100 {
            width: 100%;
            height: 100%
        }

        .point-area .point-100:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 50%;
            border: 2px solid #00cdec;
            opacity: 0;
            -webkit-animation: ripple 4.5s ease-out 2.25s infinite;
            -ms-animation: ripple 4.5s ease-out 2.25s infinite;
            animation: ripple 4.5s ease-out 2.25s infinite
        }


        /*帧动画start*/
        @-webkit-keyframes ripple {
            0% {
                opacity: 0;
                -webkit-transform: scale(.1);
            }

            5% {
                opacity: 1
            }

            to {
                opacity: 0;
                -webkit-transform: scale(1);
            }
        }

        @-ms-keyframes ripple {
            0% {
                opacity: 0;
                -ms-transform: scale(.1)
            }

            5% {
                opacity: 1
            }

            to {
                opacity: 0;
                -ms-transform: scale(1)
            }
        }

        @keyframes ripple {
            0% {
                opacity: 0;
                transform: scale(.1)
            }

            5% {
                opacity: 1
            }

            to {
                opacity: 0;
                transform: scale(1)
            }
        }[not-existing] {
            zoom: 1
        }
        /*帧动画end*/
    </style>
</head>
<body>
    <section>
          <div class="point-area" style="top: 0; left: 0; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
               <p class="point-name" style="position: absolute; top: 45px; left: 65px;">运去哪</p>
               <a href="https://www.aliyun.com/chinaglobal/home?tabId=7#guid-633594" target="_blank" class="point point-dot"></a>
               <div class="point point-10"></div>
               <div class="point point-40"></div>
               <div class="point point-shadow point-80"></div>
          </div>
    </section>
</body>
</html>

动态仿真波浪背景特效

这里写图片描述

下载地址：

实例

kingrome2009
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！
道阻且长，行则将至。
10-14 3万+
JS知识点总结，超详细，建议收藏 一、语法和变量 （一）、前端三层 （二）、JS的书写位置 （三）、输出语句 （四）、变量声明提升 变量的声明提升：你可以提前使用一个稍后才声明的变量，而不会引发异常 在执行所有代码前，JS有预解析阶段，会预读所有变量的定义 二、基本数据类型 （一）、JavaScript中两大类数据类型 （二）、typeof运算符 typeof运算符可以检测值或者变量的类型 ...
javaScript常用语法(持续更新)
ispaomoya博客
02-01 932
全网最全的javascript语法，javascript内置字符串，数组，对象，promise，数字方法
【干货】JavaScript 资源大全
ShuYunBIGDATA的博客
04-25 1175
​​GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript是 sorrycc 发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 包管理器 管理着 javascript 库，并提供读取和打包它们的工具。 npm - npm 是 javascrip...
JavaScript、CSS像素动画特效代码
最新发布
蓝易云
02-04 386
此示例创建一个带有像素粒子的容器，每隔300毫秒就会动态添加一个新的像素粒子，然后通过CSS的关键帧动画（）使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
收藏 | JavaScript常见使用方法大全详细整理
黑夜开发者的博客
06-13 979
String常用方法： 1.substring(start, end) 用于提取字符串中介于两个指定下标之间的字符 var str="Hello world!" document.write(str.substring(3)); //lo world! 2.charAt(index) 返回指定索引处的字符串 Var str= ”abc8ABCabc”; str.charAt(1); // b 3.concat 连接多个字符串，返回连接后的字符串的副本 var str1 = ”aaa
JavaScript入门：掌握基础语法
会思想的苇草i的博客
12-19 614
JavaScript基础语法包括变量声明、数据类型、运算符、条件语句和循环结构等。通过学习JavaScript基础语法，开发者可以实现网页的动态效果和交互功能，如表单验证、页面元素操作及动画效果等。JavaScript作为前端开发的核心语言，掌握其基础语法对于创建交互丰富的网页至关重要。
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 5418
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript网页特效实例大全.zip
11-08
JavaScript网页特效实例大全
JavaScript网页特效设计模板大全
09-17
【吐雪贡献】个性JavaScript特效页面大全 （在展示页面右键--查看源文件即为源码）： 1：警报对话框篇 2：菜单导航篇 3：状态栏特效篇 4：浏览器篇 5：页面背景篇 6：页面导航篇 7：页面搜素篇 8：页面特效篇 9：...
JAVASCRIPT网页特效实例
03-06
网页特效代码，很实用的JAVASCRIPT资源
JavaScript网页特效案例教程PPT
09-17
JavaScript网页特效案例教程PPT
javascript网页特效实例大全
01-25
第1章 javascript概述 1 1.1 什么是脚本语言 2 1.2 javascript简介 2 1.3 javascript与java的关系 3 1.4 javascript的基本构成 4 1.4.1 基本数据类型 4 1.4.2 变量 4 1.4.3 常量 5 1.4.4 表达式 6 1.4.5 ...
JavaScript网页特效
01-18
JavaScript网页特效300例合集，共有20章，300多个特效，分别从弹出对话框、菜单类、状态栏特效、页面特效、时间类、鼠标类等多个方面举例。
1500个web前端开发常用JavaScript特效
05-27
1500个web前端开发常用JavaScript特效
100个+非常犀利的javascript特效合集
09-17
100个+非常犀利的javascript合集。
javascript特效
04-25
一些简单常用的js特效，JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript)来编写制作动态特殊效果，比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
html+js，web聊天UI界面效果及其特效设计
07-24
html+js，web聊天UI界面效果及其特效设计，直接打开html界面就可以看到效果了
JavaScript常见的网页特效（元素样式相关属性）
shao_xuan_的博客
12-03 4533
JavaScript常见的网页特效特效样式1、模态框拖曳效果2、放大镜效果3、固定侧边栏效果4、上下图片无间断滚动5、左右图片无间断滚动如何实现这些效果呢？元素偏移量offset系列元素可视区client系列元素滚动scroll系列如何实现上面那些效果呢模态框拖曳效果代码实现放大镜效果代码实现固定侧边栏效果代码实现上下图片无间断滚动代码实现左右图片无间断滚动代码实现 特效样式 1、模态框拖曳效果 2、放大镜效果 3、固定侧边栏效果 4、上下图片无间断滚动 5、左右图片无间断滚动 如何实现这些效果呢
javascript网页特效范例宝典源码
07-14
《JavaScript网页特效范例宝典源码》是一本收集了各种JavaScript网页特效的源码的书籍。该书提供了丰富多样的特效示例，包括动画、轮播图、导航菜单、弹出框等等。这些特效可以很好地应用于网页设计和开发中，使网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值