css
关注
分享
扫一扫
文章平均质量分 71
css
richest_qi
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css实现3D旋转效果
css实现3D旋转效果原创 2022-08-14 21:31:01 · 1877 阅读 · 0 评论 -
css实现翻书效果
css实现翻书效果。原创 2022-08-10 17:15:46 · 1848 阅读 · 1 评论 -
css实现幽灵按钮
css使用过渡，使用幽灵按钮。原创 2022-08-10 14:08:46 · 291 阅读 · 0 评论 -
css函数：var()
css中的函数var()原创 2022-08-09 13:49:50 · 240 阅读 · 0 评论 -
css实现风车效果
使用CSS实现风车效果。原创 2022-08-09 09:25:15 · 755 阅读 · 0 评论 -
css实现日出日落效果
css实现日出日落效果。原创 2022-08-09 09:13:29 · 1106 阅读 · 0 评论 -
css实现太阳升起效果
使用css动画实现太阳升起效果。原创 2022-08-09 09:02:35 · 807 阅读 · 0 评论 -
css实现元素由远及近的效果
需求描述】transform实现元素由远及近的效果。原创 2022-08-08 14:11:24 · 1376 阅读 · 0 评论 -
css实现状态平滑的动画
假设有一张非常长的宽幅照片，但它的容器只是一个尺寸为150*150的正方形区域。默认显示这张图片的左边缘，当鼠标悬停或聚焦在图片上时，图片滚动显露出剩余的部分原创 2022-08-06 12:53:50 · 354 阅读 · 0 评论 -
box-shadow实现一个按钮
box-shadow实现一个按钮。原创 2022-08-05 14:35:36 · 176 阅读 · 0 评论 -
单行或多行文本溢出，省略号代替
多行文本溢出，省略号代替相关链接【css】文本过长时省略号代替【微信小程序】文本的展开与收起原创 2022-06-22 15:26:54 · 123 阅读 · 0 评论 -
微信小程序实现一个小型计算器
app.js// app.jsApp({ onLaunch() { }, REGEXP:/^[\+\-×÷]$/})app.wxss/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-siz.原创 2021-06-16 12:21:29 · 1002 阅读 · 0 评论 -
animation实现播放器效果
<!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>Doc原创 2021-06-15 21:01:05 · 184 阅读 · 0 评论 -
关于animation-fill-mode的两个例子
下面是关于animation-fill-mode 的两个例子。第一个例子<!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, initi原创 2021-06-10 22:23:50 · 199 阅读 · 0 评论 -
pt | vw | vh
文章目录pt相对长度单位视口vwvh参考文章ptpoint，磅，是一个物理长度单位。1pt=172\frac{1}{72}721英寸；1px=1dpi\frac{1}{dpi}dpi1英寸，其中dpi，dot per inch，即每英寸的点数（每英寸的像素）。所以，1pt=72dpi\frac{72}{dpi}dpi72px。以Windows下的96dpi来换算的话，1pt=7296\frac{72}{96}9672px=34\frac{3}{4}43px，所以16pt=12px。相原创 2021-06-01 16:17:51 · 1401 阅读 · 0 评论 -
【css】实现箭头
实现向上、右、下、左的箭头<body> <div class="arrow-top"></div> <div class="arrow-right"></div> <div class="arrow-bottom"></div> <div class="arrow-left"></div></body>div{ width: 20px; height: 20原创 2021-01-19 21:53:03 · 4611 阅读 · 0 评论 -
【css】实现一张折扣券
第一种实现方式使用flex布局实现文本水平垂直居中。<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</titl原创 2020-12-21 20:55:07 · 420 阅读 · 0 评论 -
【css】实现自适应背景区域的背景图像
文章目录background-sizebackground-size:coverbackground-size:containbackground-size:100%background-size:100% 100%实现与背景图像自适应的背景区域参考文章background-sizebackground-size:cover背景图像会依照自己原有的宽高比进行缩放以完全覆盖背景区域。如果背景区域与背景图像的大小不一致时，背景区域优先，因此会对背景图像的大小进行裁剪，于是背景图像会有部分不可见。比如，原创 2020-12-20 18:33:21 · 694 阅读 · 0 评论 -
【css】margin坍塌及应对办法
文章目录背景遇到的问题解决方法背景先给出源码吧<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo</title&原创 2020-12-20 13:11:18 · 407 阅读 · 0 评论 -
【微信小程序】文本的展开与收起
文章目录详细代码相关说明参考文章详细代码app.json的内容如下{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#07c160", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"white" },原创 2020-11-18 11:00:26 · 2070 阅读 · 1 评论 -
【微信小程序】Flex布局
flex-directionrow默认值，默认水平轴是主轴，垂直轴是交叉轴。column此时，垂直轴是主轴，水平轴是交叉轴。justify-content决定如何分配主轴的剩余空间align-content决定如何分配交叉轴的剩余空间align-items决定Flex项在交叉轴上的对齐方式...原创 2020-11-02 13:26:00 · 1402 阅读 · 0 评论 -
【移动开发】媒体查询
<body> <div class="box">缘分一道桥</div></body>div{ width:200px; line-height: 32px; text-align: center;}.box{ background-color:lightskyblue;}@media screen and (max-width:640px) { .box{ background-co原创 2020-08-17 20:21:56 · 243 阅读 · 0 评论 -
【css】SVG实现饼图
circle(cx,cy)圆心坐标r圆半径fill填充色stroke描边stroke-width描边宽度。fill区域的径向宽度。它的宽度分布在两个区域：fill区域内和fill区域外，且各占一半，即(stroke-width)/2。dasharray将描边以虚线的形式分成多段。dasharray:<body> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100.原创 2020-09-13 17:59:15 · 1601 阅读 · 0 评论 -
【css】实现饼图
<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div></body> div{ margin: 5px; } .box{ width: 100px; height: 100px; background-color: lightgolde原创 2020-09-12 22:37:54 · 1947 阅读 · 0 评论 -
【css】实现切角
<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div></body>div{ margin: 50px;原创 2020-09-06 14:31:06 · 3424 阅读 · 1 评论 -
【css】多边形变形
<body> <div class="box">hello</div> </body> .box{ width: 100px; height: 100px; background-color: lightskyblue; transform: skew(-45deg); }水平拉伸div.box，它里面的文字也倾斜了，忽然想到一句话，“身不正，影子也跟着歪”。现在想让容器倾斜，但里面的文字不倾斜，原创 2020-09-05 18:09:21 · 631 阅读 · 0 评论 -
【css】border-image
border-image给元素的边框绘制图像。border-image-sourceborder-image-spliceborder-image-repeatborder-image-widthborder-image-outset<body> <div class="box"></div></body>.box{ width: 100px; height: 100px; background-colo原创 2020-09-03 22:52:09 · 350 阅读 · 0 评论 -
【css】animation
animation-name@keyframes指定的关键帧名称animation-duration动画从开始到结束持续多长时间animation-timing-function调速函数，默认是ease。它决定了在整段时间里动画是如何推进的。ease低速进入，然后突然加速，时间逝去50%，动画已推进至80%，随后减速至动画结束。ease-in时间逝去50%，动画已推进至32%，随后加速ease-out时间逝去50%，动画已推进至68%，随后减速ease-in-o.原创 2020-09-02 21:08:44 · 677 阅读 · 0 评论 -
【css】棋盘的svg实现
linear-gradient可以实现棋盘。其实还有一个更简单的方式，那就是SVG。<body> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"> <rect x="50" width="50" height="50"></rect> <rect y="50" width="50" height="50"&g原创 2020-09-02 16:54:32 · 499 阅读 · 0 评论 -
【css】table页码
一个比较好的实践是：<svg fill="currentColor">。ul{ list-style: none; margin: 0; padding: 0;}.pagination{ float:right; font-size: 14px; color: rgba(0,0,0,.85); margin: 16px 0; line-height: 36px;}.previous,.next,.item{ d原创 2020-09-01 23:15:02 · 453 阅读 · 0 评论 -
【sass】上手sass
变量定义与引用变量可以定义在规则块内，也可以定义在规则块外。定义在规则块外，类似于全局变量；定义在规则块内，则类似于局部变量，只能在该规则块内使用。$box-bck-color:lightskyblue;.box{ $box-width:100px; width: $box-width; height: 100px; background-color: $box-bck-color;}sass index.scss index.css，编译后结果如下：.box原创 2020-08-24 12:19:38 · 252 阅读 · 0 评论 -
【css】radial-gradient()
文章目录radial-gradient()波点radial-gradient()径向渐进渐进起点始终是元素的中心点渐进终点有四种，farthest-corner渐进终点在离元素中心点最远的角上farthest-side渐进终点在离元素中心最远的边上closest-corner渐进终点在离元素最近的边上closest-side渐进终点在离元素最近的角上<body> <div class="box"></div></bo原创 2020-08-19 18:34:19 · 499 阅读 · 0 评论 -
【css】linear-gradient()
linear-gradient，创建两种或多种颜色线性渐变的图片。<body> <div class="box"></div></body>div{ width: 100px; height: 100px;}.box{ background-image: linear-gradient(gold,blue);}原创 2020-08-18 18:11:15 · 1468 阅读 · 0 评论 -
【css】Flex之并列布局
<body> <div class="box blue"> <div class="item green">1</div> <div class="item green">2</div> <div class="item green">3</div> </div></body>.blue{ background-原创 2020-08-17 14:57:36 · 2341 阅读 · 0 评论 -
【css】Flex之骰子布局
本文档完全参考阮一峰大神的Flex布局教程，详细记录以备忘。单个Flex项<body> <div class="container box"> <div class="item"></div> </div></body>body{ background-color:#333;}.container{ background-color:#e7e7e7; margin:1原创 2020-08-16 21:58:42 · 2939 阅读 · 0 评论 -
【css】图片染色
hsla()hhue，色相，值范围：0~360，调节基本色ssaturation，饱和度，值范围:0%~100%饱和度越高，颜色越鲜艳llightness，亮度，值范围：0%～100%0%，黑色100%，白色aalpha，透明度，值范围：0%～100%0%，完全透明100%，实色hsla(360,100%,0%)，黑色hsla(360,100%,0%,100%)，黑色hsla(360,100%,0%,0%)，白色滤镜filter:sepia() | saturate(原创 2020-08-15 17:16:20 · 566 阅读 · 0 评论 -
【css】border-radius
border-radiusborder-radius作用在border-box上。<body> <div class="box">光盘行动</div></body>.box{ width:100px; line-height:1em; padding:1em; background-color:lightskyblue; border-radius:1em;}border/box-shadow/原创 2020-08-14 15:35:38 · 472 阅读 · 0 评论 -
【css】Flex布局
Flex容器display:flex|inline-flexFlex项Flex容器内的子元素主轴/交叉轴Flex项总是沿主轴排列。默认水平轴为主轴，主轴起点在左端；垂直轴为交叉轴，交叉轴的起点在上端。即flex-direction默认值是row。<body> <div class="container flexbox"> <div class="box">1</div> <div class=".原创 2020-08-14 14:47:22 · 1366 阅读 · 0 评论 -
【css】background-position定位背景图片
<body> <div class="box"></div></body>.box{ width:200px; height:200px; background:lightgoldenrodyellow url(./imgs/PC.png) no-repeat; background-position:left; /* background-position:right; background-po原创 2020-08-11 18:12:17 · 687 阅读 · 0 评论 -
【css】实现多重边框
<body> <div class="box"></div></body>div{ margin:100px auto 0 auto; width:100px; height:100px; background-color:lightyellow;}实现多重边框，有两种方式。第一种：使用box-shadow的扩张半径.box{ box-shadow:0 0 0 5px lightskyblu原创 2020-08-10 17:33:01 · 395 阅读 · 0 评论