<!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> <style> *{ margin: 0; padding: 0; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(150deg,#d299c2,#fef9d7); overflow: hidden; } .container{ width: 200px; height: 200px; position: relative; } .bubble{ width: 100px; height: 100px; background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%); border-radius: 50%; box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc, inset 80px 0 60px #efcde6, inset -20px -60px 100px #f9f6de, inset 0 50px 140px #f9f6de, 0 0 90px #fff; animation: bubble 4s ease-in-out infinite; } .showed{ background-color:rgba(39, 211, 139, 0.15); animation: showed 4s ease-in-out infinite; } @keyframes bubble{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-80px); } } @keyframes showed{ 0%,100%{ transform: scale(0.5); } 50%{ transform: scale(1); } } </style> </head> <body> <div class="container"></div> <div class="bubble"></div> <div class="showed"></div> </body> </html>
520泡泡的源码
2022-10-09
92
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
520泡泡的源码
目录
相关文章
|
7月前
|
7月前
|
流计算
|
4月前
|
图形学
|
5月前
|
算法
C#
图形学
|
7月前
|
前端开发
JavaScript
程序员
程序员教你用代码制作3d爱心跳动特效，正好拿去送给女神给她个惊喜
使用HTML、CSS和JavaScript实现了一个三维网格采样器`MeshSurfaceSampler`，适用于任意浏览器，推荐谷歌。代码创建了一个类，从缓冲几何体的三角形网格中进行随机采样。提供了设置权重属性、构建分布和自定义随机数生成器的功能。用户只需将代码复制到文本文档并保存为HTML文件，即可运行。适合编程爱好者尝试，也可分享给他人。
244
1
1
|
小程序
开发工具
樱花飘落模拟器-情人节祝你表白成功
看着樱花缓缓的飘落，然后不觉间竟下起了绵绵的细雨。因为今天我所在的城市正下着小雨，所以就在这个小应用中增加了阵阵的细雨功能。
下面我们就学习一下如何实现一个这样温暖的小程序。
首先准备一下素材。一个粉色的背景，两个樱花花瓣，一个模拟雨滴的长方形，以及两句要显示的话。
139
0
0
|
前端开发
JavaScript
容器
|
JavaScript
前端开发
WebGL 手撸3d贺卡+小草飘动滤镜
前言
图片
2022-2-15
webGL初始化（常规操作）
获取 WebGLRenderingContext
const gl = canvas.getContext('webgl');
编译shader并把编译好的shader附加到创建好的program中
//顶点着色器
const vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader,vertSource);//vertSource:着色器源码
gl.compileShader(vertShader);
188
0
1
|
JavaScript
前端开发
测试技术
热门文章
最新文章
1
docker容器里安装ssh
2
优秀的代码都是如何分层的？
3
RDS入门——Excel文件转存到RDS数据库实践
4
3、Python与设计模式--建造者模式
5
PostgreSQL SQL HINT的使用
6
跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
7
AjaxFileUploader上传插件 兼容性好
8
（转载） 数组a[]={3,5,2,4,1,8}，要求从a中找出所有“和”等于10的子集
9
SAP WM Movement Type Mail Control for Background processing
10
Ext 4 概述（七）之面板Panel & 杂项
1
自学记录HarmonyOS Next DRM API 13：构建安全的数字内容保护系统
42
2
《MaxFrame：数据处理的卓越实践与提升》
58
3
《DataWorks：数据处理的卓越实践与改进思考》
51
4
三维球体空间中光线反射模拟与三维点云提取matlab仿真
49
5
《多模态数据信息提取解决方案的体验与部署》
47
6
基于PSO优化的PV光伏发电系统simulink建模与仿真
57
7
数据链中常见电磁干扰matlab仿真,对比噪声调频,线性调频,噪声,扫频,灵巧五种干扰模型
50
8
《破局之路：人工智能产业的健康发展》
39
9
《强化学习算法在动态环境中的优化之路》
42
10
《大模型训练成本高，如何在不牺牲性能的前提下破局》
43