Javascript Web网页特效 收录大全
2024-05-11 11:14:17
前言
本编文章纯属个人形为，如果对您有帮助将不胜感激。
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>动态仿真波浪背景特效
下载地址：
实例
Javascript Web网页特效 收录大全相关推荐
- php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果 看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
- Java Script网页特效实例大全
Java Script网页特效实例大全 2009年06月27日 JavaScript是一种简洁的.面向对象的.跨平台的描述语言,是一种专门用来开发Internet客户端和服务端的应用程序.使用Java ...
- 网页设计作业 仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- HTML5期末大作业：网上预订网站设计——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:网上预订网站设计--火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- DIV布局大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:仿悦世界游戏网站设计--仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- 学生DW静态网页设计——代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业
HTML5期末大作业:家乡广州网站设计--代码质量好-家乡广州 (5页) HTML+CSS+JavaScript web网页制作期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...
- 【HTML③】JavaScript基础、使用JavaScript制作网页特效、使用前端库及UI框架快速开发
[HTML③]JavaScript基础.使用JavaScript制作网页特效.使用前端库及UI框架快速开发 八.JavaScript基础 1.JavaScript JavaScript简称JS是用于制 ...
- HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
最新文章
- hbuilder怎么没法插入字符了_一个你所不知道的加密方式--零宽字符加密
- 内向的人很难成为群体程序员吗?
- Android style 继承
- 处理Akka应用程序中的每个事件
- 数据库的几个概念：主键，外键，索引，唯一索引
- 信息学奥赛一本通C++语言——1038：苹果和虫子
- Vmware怎样使用nat和桥接方式解决虚拟机联网问题
- P4320 道路相遇
- ws2812B+单片机驱动
- 软考试题中经常混淆的概念
- 离线高清卫星地图SDK及解决方案
- 计算机桌面有去不掉的框,电脑右下角有个白色方框去不掉
- 2022-08-09 mysql/stonedb-慢SQL-Q16分析
- CKEditor5+vue3使用以及如何添加新工具栏
- Unity 电脑CPU 显卡查询 存储空间查询
- 「司库立方」再获数亿元C轮融资，她们做对了什么？
- signature=3857ce3ebaa6b547d8be98ebee7c4307,Dark Matter Search with Gravitational Microlensing Events
- element ui实现自定义上传文件-以及解决已上传文件列表消失问题
- Ueditor富文本编辑器使用本地表情包
- 【Java牛客刷题第四期】——想让自己算法大幅度提升，这一期你一定不要错过