css
bingduYu
醉后不知天在水,满船清梦压星河。
展开
-
微信小程序width:100%问题
代码备忘录外层的view 不要定义width:100%这是加了width:100%,又加了padding这是正常的,不加width:100%**最后,最外层的view不要加width:100% *!!! ***原创 2019-06-26 17:25:44 · 2664 阅读 · 0 评论 -
心跳动效css
animation: heartbeat 800ms infinite;-webkit-animation: heartbeat 800ms infinite;// 心跳动效@keyframes heartbeat { 0% { transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o原创 2021-12-14 09:36:47 · 461 阅读 · 0 评论 -
transition过渡属性详解
写在前面transition是一种动画的表现形式,有4个属性动画属性首先,我们看一下具体写法transition: property duration timing-function delay;具体化表现形式transition: width 2s linear 2s;分别是: css属性的名字width(宽), 过渡效果所用的时间, 匀速过渡, 动画开始执行的时间具...原创 2019-08-22 18:00:35 · 674 阅读 · 0 评论 -
animation属性详解
写在前面css3的animation可以实现很多炫酷的动画,让自己的网页看起来更加生动灵活,下面,来看一下都有些什么玩意属性。动画属性首先,我们看一下具体写法animation: name duration timing-function delay iteration-count direction fill-mode play-state;具体化表现形式animation:myA...原创 2019-08-22 17:46:57 · 1701 阅读 · 0 评论 -
纵向的走马灯,有停顿效果
代码备忘录实现了列表数据一条一条向上移动,每移动一条数据停一下思路一开始想用属性的,但是发现,这样一来初始化的时候会空出一个可见div的高度,第一条数据才姗姗来迟,而且没有实现每移动一条数据停顿一下的效果。现在使用anim来控制,scroll()方法第一步打开animate开关,并且每隔一秒将数组的第一个元素添加到数组的最后一位,再删除数组的第一个元素,最后再关闭animate开关,在赋值数...原创 2019-07-22 14:28:20 · 770 阅读 · 0 评论 -
transform转化属性
写在前面transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。动画属性转载 2019-08-22 18:03:53 · 185 阅读 · 0 评论 -
神奇的css
https://www.cnblogs.com/coco1s/p/9406413.html原创 2022-05-11 09:07:25 · 143 阅读 · 0 评论 -
会动的蚂蚁线css
<div class="box"> 会动的蚂蚁线,css</div>.box { width: 300px; background: linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x,原创 2021-07-16 10:38:28 · 435 阅读 · 0 评论 -
那些你可能不知道又好用的css属性
1. 伪类选择器 focus-within它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。 这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within。例子<div class="formBox"> <div class="formBox_input"> <input type="text" placeholder="userName" class="g_input" > </div&原创 2021-07-01 10:54:19 · 144 阅读 · 0 评论 -
让人惊艳的css filter滤镜
滤镜函数blur():模糊图像brightness() :让图像更明亮或更暗淡contrast():增加或减少图像的对比度drop-shadow():在图像后方应用投影grayscale():将图像转为灰度图hue-rotate():改变图像的整体色调invert():反转图像颜色opacity():改变图像透明度saturate():超饱和或去饱和输入的图像sepia():将图像转为棕褐色效果1. 与box-shadow不同的阴影效果filter: drop-shadow(x原创 2021-06-29 10:04:28 · 298 阅读 · 1 评论 -
一根中间粗两头尖的分割线css
一根中间粗两头尖的分割线.border{ height: 1px; width: 1600px; background: linear-gradient(243deg,#002627 0%,#00ffcd 51%,#002627 100%); }原创 2021-01-27 09:35:27 · 1096 阅读 · 0 评论 -
filter图片变成白色或者黑色(用brightness)
图片变成白色filter: brightness(100);图片变成黑色filter: brightness(0);原创 2020-01-13 13:45:58 · 4592 阅读 · 0 评论 -
修改滚动条的样式
/* 滚动条样式 */*::-webkit-scrollbar { width: 5px; height: 5px; z-index: 999;}/*正常情况下滑块的样式*/*::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; /* -web...原创 2019-12-23 20:41:34 · 235 阅读 · 0 评论 -
文字描边/文字渐变色效果
文字描边 font-weight:bold; font-size:40px; color: transparent; -webkit-text-stroke: 1px red;文字描边效果主要是-webkit-text-stroke属性,文字太小描边效果就不明显文字渐变色 -webkit-background-clip: text; -webkit-text-fil...原创 2019-12-03 12:02:43 · 413 阅读 · 0 评论 -
flex简单用法
flex的容器属性flex-flowflex-directionflex-wrapjustify-contentalign-itemsalign-contentflex元素属性orderflex-growflex-shrinkflex-basisflexalign-self1.弹性盒模型只要加上display:flex ,就成了弹性盒子,这个元素就成为了弹性容...原创 2019-06-10 15:08:28 · 645 阅读 · 0 评论 -
文本溢出变省略号(单行/多行)
代码备忘录文字数量过多超出div宽度变成省略号overflow: hidden;//超出隐藏text-overflow:ellipsis;//编程省略号white-space: nowrap;//不换行记得设置宽度 或者 最大宽度...原创 2019-06-26 17:44:03 · 289 阅读 · 0 评论 -
画球形,css样式
画球形,css样式 .ball{width: 100px;height: 100px;border-radius: 50px;background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);}...原创 2019-07-22 13:41:41 · 392 阅读 · 0 评论 -
编写响应式网站的几点注意事项
编写响应式网站的几点注意事项屏幕的大小开始的开始,声明viewport标签了解各设备的屏幕大小**元素的宽度字体布局,定位图片大小善用::before和::after伪元素 +content 属性屏幕的大小开始的开始,声明viewport标签大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用...原创 2019-08-06 19:33:45 · 269 阅读 · 0 评论 -
box-shadow和drop-shadow滤镜
记box-shadow和drop-shadow滤镜的区别展示效果drop-shadow是没有内阴影效果的drop-shadow是不能阴影叠加的阴影(drop-shadow) vs 盒阴影(box-shadow)展示效果filter:drop-shadow(5px 5px 10px black)box-shadow: 5px 5px 10px black;很明显,box-shadow...转载 2019-08-22 09:58:12 · 207 阅读 · 0 评论 -
css实现吸顶效果
position有一个还在实验的属性值sticky,可以很简单的实现吸顶的效果<div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div>.box { position: stick...原创 2019-09-26 17:25:15 · 2185 阅读 · 0 评论 -
瀑布流css写法(分栏)
前言实现一个瀑布流页面需要合理的使用分栏column,我们先认识一下column有哪些属性分栏column-count(列数)这个属性有两个属性值:number | autocolumn-count:3;-moz-column-count:3; /* Firefox /-webkit-column-count:3; / Safari and Chrome */col...原创 2019-10-09 10:28:09 · 268 阅读 · 0 评论 -
几种div框集合
几种div框集合前言:因为项目需要,从网上找了些div框的样式,在这里集合记录一下,方便下次使用基础点<p style=border-style:none>无边框</p><p style=border-style:dotted>点线式边框</p><p style=border-style:dashed>破折线式...原创 2019-06-26 17:27:51 · 350 阅读 · 0 评论