在线模拟器，可以模拟各种苹果移动设备和操作系统 这是一个在线模拟器，可以模拟各种苹果移动设备和操作系统，方便开发者测试和演示应用程序。网站网址： 在线模拟器

如此丝滑的按钮交互效果 分享一个很有特色的按钮交互效果，保证让你停不下来，原作者是Adam Kuhn，有兴趣的可以去 codepen 体验，地址： codepen 基于封面动图可以将主要实现的几个功能点拆分为以下几点：按钮的径向渐变背景色可以随着鼠标的移动变化按钮的背景区域会随着鼠标的移动产生弹性变化效果按钮的文字阴影会随着鼠标的变化而变化喜欢的可以试试添加到你的网站里面下载:https://kkpig.lanzoub.com/iWlBz0sk8suf密码:kkpig

怎么让让p标签里文字不换行，以省略号结束 想要页面显示一行内容，简单的办法让p标签里文字不换行，以省略号结束，只需要几行css就可以实现，其余用法小伙伴们自行测试//一行 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; //两行 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;

使用HTML+CSS实现网页Loading加载效果，支持定时或加载完成后隐藏 网页使用loading可以给用户带来更好的体验，避免网页渲染中长时间出现网页整体空白从而影响访客的体验，loading在部分大型 APP 也有在应用。下面使用 HTML+CSS+JS 实现完整的 Loading效果。请先引入 jQuery，因为 JS 定时隐藏依赖 jq。<div class="loaderbg"> <div class="spinner"> <div class="double rect1"></div> <div class="double rect2"></div> <div class="double rect3"></div> <div class="double rect4"></div> <div class="double rect5"></div> </div> </div>loaderbg类为loading的背景色，为白色。.loaderbg { background-color: #fff; width: 100%; height: 100%; overflow: hidden; position: fixed; left: 0; top: 0; z-index: 99999999 } ::-webkit-scrollbar-thumb { background-color: #b1b1b1; border-radius: 15px } ::-webkit-scrollbar-thumb:hover { background-color: #777 } .spinner { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -30px; width: 50px; height: 60px; text-align: center; font-size: 10px } .spinner>.double { background: #49a9ee; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchDelay 1.2s infinite ease-in-out; animation: stretchDelay 1.2s infinite ease-in-out } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s } @-webkit-keyframes stretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4) } 20% { -webkit-transform: scaleY(1) } } @keyframes stretchDelay { 0%, 40%, 100% { transform: scaleY(.4); -webkit-transform: scaleY(.4) } 20% { transform: scaleY(1); -webkit-transform: scaleY(1) } }js 在这里的作用为定时或网页加载完成后关闭loaderbg类//页面加载完成之后隐藏loading $(window).load(function () { $(".loaderbg").hide(); }); //设置页面加载3 秒之后隐藏loading $(function () { setTimeout(function () { $(".loaderbg").hide(); },3000); })第一种方法是等待网页全部加载完成后再隐藏loading，但同时如果网页其他资源文件加载缓慢（如图片等），loading也会随之存在更长时间。第二中方法是设置定时隐藏loading，可以根据实际需求更改隐藏时间，默认为 3s。以上第一种方法 jquery 低版本测试正常，高版本可能会报错：ncaught TypeError: a.indexOf is not a function at r.fn.load原因是在 jQuery 3.x 中取消了 load()，将 $(window).load(function () { 替换为 $(window).on('load',function(){ 即可，如：$(window).on('load',function(){ $(".loaderbg").hide(); });同时考虑到如果用户的浏览器侧不支持 JavaScript 或者 JavaScript 被禁用，需要使用 noscript 标签，添加 display:none 属性即可，noscript 只会在浏览器环境不支持 JS 或者 JS 被禁用才会执行<noscript> <style> .loaderbg { display: none; } </style> </noscript>其实很简单去试试吧