前端圆形倒球体环绕/波纹动态图
1.FastReport换行配置2..net前端传字符串到后台接口不完整3.数据库查询字段前N个字符4.I标签禁用触发事件5.Sql时间格式化6.从数组中,直接获取所需数据7.Sql 截取字符串方式8.SQL日期格式9.定义了鼠标指针放在一个元素边界范围内时所用的光标形状10.VsCode打包11.WCF12.MD5加密13.WCF服务支持http14.获取计算机信息15.文件复制/解压16.向服务器上传文件17.向服务器更新文件18..net 在config中取值19.在DevExpress GridControl的一列中显示图片20.定时timer21.直接在对象数组中找数据22.uni-app 请求接口报错request:fail abort statusCode:-123..net接口出现405跨域错误24.css样式变量25.sql 多列合并成一个字符串26.Http404.3 MIME映射问题27.动态添加RibbonPageGroup/NavBarGroup28.Sql/MySql 连接配置29.动态添加XtraPrivotGrid/XtraGrid30.IIS错误50031.dropDownButton使用方法32.xml文件创建/写入33.服务器无法访问题34.DEV控件加载到VS工具箱中35.签名时出错: 未在路径 C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\bin36.旋转弧度计算方式JS37.微信小程序上传图片报错:uploadFile:fail url not in domain list38..NET混合开发解决方案WebView2控件的导航事件39.uniapp项目打包为桌面应用的方法步骤40.WCF 接收我服务的 HTTP 响应时发生错误41.vscode之vue文件代码格式化代码无效解决办法42.Vue框架规则类错误43.【vue】ElementUI el-table自适应列宽实现44.uni-app electron打包成exe应用45.HTTP Error 503. The service is unavailable.46.接口对接Get/Post47.Guid随机生成36位数48.Timer计时器实现定时49.HTTP 请求 (Request)50.接口开发笔记-WebApi51.ASP.NET 自定义控件52.uni-app 版本更新53.图片转二进制的相互转化54.uni-app 设置多语言切换uni-i18n插件55.uniapp 在 Android Studio 模拟器中运行项目56.前端css中animation(动画)的使用57.Android 模拟机配置内网
58.前端圆形倒球体环绕/波纹动态图
<view class="left_box" v-if="time!=0"> <view class="left_item"></view> </view> </view> <style> .box { /* 最外层的盒子 */ width: 240rpx; height: 240rpx; margin: 0 auto; position: relative; border-radius: 50%; background-color: #fff; margin-top: 20px; border: 1px solid #8F8F8F; } .left_box { /* 球的父盒子,旋转带动球旋转 */ position: absolute; top: -6rpx; left: -6rpx; bottom: -6rpx; right: -6rpx; width: 252rpx; height: 252rpx; overflow: hidden; z-index: 1; border-radius: 50%; animation: loading_left 15s linear; } .left_item{ /* 小球位于父盒子边中间 */ width: 10rpx; height: 10rpx; border-radius: 50%; background-color: #8F8F8F; margin: 0 auto; } .mask { /* 中间倒计时部分,和圆环的内圆 */ position: absolute; top: 6rpx; left: 6rpx; right: 6rpx; bottom: 6rpx; z-index: 2; border-radius: 50%; background-color: #fff; text-align: center; opacity: 0.3; background: #EDEDED; border: 6rpx solid #8F8F8F; line-height: 226rpx; font-size: 112rpx; color: #999999; text-align: center; font-weight: 700; } /* 动画 */ @keyframes loading_left { to { transform: rotate(1turn); } } </style>
<view class="newDateTime" v-if="showTime"> <view class="meetStatusOut"> <div class="WaterGread" v-show="!_self.status"></div> </view>
<style> .WaterGread { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:#38b97300; /* 水波纹的颜色 */ border-radius: 50%; overflow: hidden; z-index: 1; /* 确保水波纹在文字之上 */ } .newDateTime { /* background-color: white; */ color: white; font-size: 80rpx; line-height: 100rpx; padding: 10rpx; /* height: 200rpx !important; */ border-radius: 10px; margin-bottom: 10px; /* line-height: normal; */ text-align: center; margin: calc(25%) 0px; /* 设置外层容器的内边距 */ } .meetStatus { /* 圆形容器的阴影样式 */ overflow: hidden; /* 确保容器裁剪水波纹效果 */ cursor: pointer; /* 鼠标悬停时显示手型光标 */ } .WaterGread::after { content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 40%; background-color:rgb(57 203 68 / 50%); /* 水波纹内部颜色 */ animation: real 60s linear infinite; /* 实际水波纹的动画效果 */ } .WaterRed::after { content: ''; position: absolute; top: 0; left: 50%; width: 150%; height: 150%; border-radius: 40%; background-color:rgb(170 0 0 / 50%); /* 水波纹内部颜色 */ animation: real 60s linear infinite; /* 实际水波纹的动画效果 */ } @keyframes real { 0% { /* 初始状态:向上平移50%、左平移65%并旋转0度 */ transform: translate(-100%, -100%) rotate(360deg); } 100% { /* 终止状态:向上平移50%、左平移65%并旋转360度,形成旋转一周的效果 */ transform: translate(50%, 65%) rotate(0deg); } } </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂