css
关注
分享
扫一扫
文章平均质量分 63
BetterGG
这个作者很懒，什么都没留下…
展开
-
CSS——js 动态改变原生 radio、switch 的选中样式
原生 radio：不使用 input 的 checked 属性，直接使用 class，通过 js 改变 class 达到 radio 的动态高亮效果。原生 switch：使用原生 input，css 需改 input=checkbox 的基本样式为滑动按钮，js 动态改变 class 属性做到高亮的变化效果。原创 2023-04-20 17:01:38 · 1919 阅读 · 1 评论 -
CSS——实现水面波纹无限散开的动画
此方法来自转载：无限波纹上文中的补充部分可以实现该无限轮播并实现自然衔接，没有突然跳动的效果。下面附上我的一些代码1、自然轮播，没有速度变化@keyframes ripple2 { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6), 0 0 0 20px rgba(255, 0, 0, 0.4), 0 0 0 40p...转载 2019-11-12 15:30:27 · 1299 阅读 · 0 评论 -
CSS—— vertical-align 与居中
效果图如下注意：本文只讲了些 vertical-align 的应用，其基本原理 以及 应用原理见张鑫旭大神的讲解（我对CSS vertical-align的一些理解与认识）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7...原创 2018-09-19 09:34:40 · 372 阅读 · 0 评论 -
CSS—— flex 布局的兼容
节选自：https://www.cnblogs.com/cina33blogs/p/6737909.html看这个定义弹性布局盒子display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;定义子元素排列-webk...转载 2018-10-17 14:52:06 · 366 阅读 · 0 评论 -
CSS——文字两端对齐小技巧
在这里有其实现思维的解释：https://segmentfault.com/a/1190000011336392我只在此根据自己在开发中实现代码做个总结<div class='div'> 这里是文字</div>.div { width: 120rpx; text-align: justify;}.div::after { conte...转载 2018-11-28 11:51:40 · 304 阅读 · 0 评论 -
CSS——给 div 设置显示效果小于 1px 宽度的边框
.box text { color: #2298fc; padding: 5rpx 10rpx;}.box text.borderB { position: relative;}.box text.borderB:after { display: block; content: ''; position: absolute; top: 0; botto...原创 2018-12-18 10:46:57 · 1731 阅读 · 0 评论 -
CSS——清除浮动，不破坏文档结构，没有副作用
因为浮动的特殊性以及使用后往往需要考虑对后续代码效果的影响，我个人一直极少用浮动，用完之后清除浮动的方法也很单一，对父元素设置如下 clearfix 的 class 属性就行：.clearfix:after,.clearfix:before {content: '';display: table;}.clearfix:after {clear: both;}.clearfix {*zoo...转载 2019-02-14 17:30:35 · 232 阅读 · 0 评论 -
CSS——浏览器兼容问题
1、ie 浏览器从 9 开始兼容 flex 布局并支持媒体查询，自 9 之后基本上正常开发就可以了，只要不用 css3 属性，ie9 的显示效果和谷歌浏览器上是一样的。但一旦需要兼容 ie8，需要面临很多问题，见此链接：小小夕2、各浏览器对 css3 属性的支持3、各浏览器对 css3 选择器的支持4、怎样开发能快速并不重复不遗漏的处理使用到的 css 属性？推荐使用 le...转载 2019-03-20 17:08:03 · 412 阅读 · 0 评论 -
CSS——content换行符与打点loading效果
效果：省略号从一个点到三个点不停变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-05-16 15:49:18 · 833 阅读 · 0 评论 -
CSS—— border 与三角
以上是各种效果图，分左右两排，竖着看，顺序是 1-6<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <styl原创 2018-09-19 09:29:44 · 284 阅读 · 0 评论 -
CSS——理解 content 与替换元素
1、基于伪元素的图片内容生成技术 与 内容的替换 下文 html 中的 img 标签中的 data-src 的内容，请自己替换成正确内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</原创 2018-09-17 23:06:17 · 1036 阅读 · 0 评论 -
css——兼容 ie
首先，我在把ie 浏览器更新到 11 后，在 f12 调试工具中发现一片空白，解决方法如下：安装补丁：64位的系统应该使用下面这个补丁：http://www.microsoft.com/en-us/download/details.aspx?id=4515432位的系统应该使用下面这个补丁：http://www.microsoft.com/zh-CN/download/details.as...原创 2018-09-12 11:30:13 · 2863 阅读 · 1 评论 -
CSS——字体颜色滚动渐变动画
显示效果如上图所示，此外还包含颜色滚动效果。代码如下：HTML：<p class="colorful ovh"> <a href="https://weidian.com/?userid=1302830717&code=081hokh32X0I3M0FH6i32J14h32hokh1" class="btn" target="_blank">原创 2018-06-11 11:56:33 · 7206 阅读 · 1 评论 -
app中我的页面头像及背景效果实现
以上图片中含有2个动态效果： 1、蓝色背景有动画 2、头像中下部分的波浪也是动画完整 html 页面代码如下：注：头像中的笔是 iconfont，在此并未传入 iconfont 的相关文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2018-05-29 16:41:00 · 2632 阅读 · 0 评论 -
关于设备像素比的理论知识
一、视网膜屏幕视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕。苹果这个术语用在iphone 4手机上，自此一直沿用，它将960×640的像素压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi），称之为“视网膜屏幕”。ppi（pixels per inch）所表示的是每英寸长度所能够排列的像素（pixel）的数目。因此PPI数值越高，即代表显示屏能够以更高的密度...原创 2018-05-29 17:37:27 · 634 阅读 · 0 评论 -
字体图标或文字的渐变效果
效果图：css： .bang .wrapper .scroller ul{ line-height: 3.4rem; height: 100%; display: -webkit-flex; } .bang .wrapper .type{ width: 5rem; display: inline-block; margin: 0 9px; overflow: hid...原创 2018-06-14 16:49:13 · 3363 阅读 · 0 评论 -
css——小技巧
1、文字少于一行时居中，超过一行时靠左html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-...原创 2018-06-15 10:26:08 · 2960 阅读 · 1 评论 -
flex 布局
1、属性与值 1.作用在父级 div 的属性值： display: flex; flex-direction: row / column / row-reverse / column-reverse; flex-wrap: nowrap / wrap / wrap-reverse; flex-flow: row wrap; ...原创 2018-06-29 14:24:19 · 180 阅读 · 0 评论 -
父级div固定高度并设置超出隐藏，子级div内容超出隐藏可以垂直滚动的设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,widt原创 2018-06-25 17:45:50 · 12790 阅读 · 0 评论 -
背景色渐变的几种常规写法与差别
首先声明：以下是我在做微信小程序是尝试的结果，在手机app开发中是否有差异尚未验证，欢迎留言讨论本文先给实例再讲结论，如果小伙伴等不及可以先看最后的结论本文所用的 方向值为（left、top、right、bottom）透明度值越大越不透明：对透明度不熟悉或还有疑虑的小伙伴可以点此直接试一下：点击打开链接 一、需要用 透明度，rgba 写法 1、使用 方向值，必须要 -w...原创 2018-07-02 17:42:54 · 3474 阅读 · 0 评论 -
移动端tab切换时下划线的滑动效果
本篇会放置多种下划线滑动效果，一篇一篇增加，更新中1、当前 tab 出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致），伴随过渡效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>change tab&原创 2018-08-03 16:33:58 · 9467 阅读 · 0 评论 -
CSS——box-shadow 的各个方向的阴影（√）
原点为基点，原点左侧为x轴负方向，值为负，右侧为正；原点下方为y轴正方向，值为正，上方为负。官方用语： box-shadow: 1px 2px 3px 4px #ccc inset；来分别看一下以上六个值的含义：1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；2px 从原点开始，沿y轴正方向的长度；（倘若为负值，...原创 2018-05-21 11:15:14 · 4297 阅读 · 0 评论