![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 71
css
richest_qi
这个作者很懒,什么都没留下…
展开
-
css实现3D旋转效果
css实现3D旋转效果原创 2022-08-14 21:31:01 · 1768 阅读 · 0 评论 -
css实现翻书效果
css实现翻书效果。原创 2022-08-10 17:15:46 · 1683 阅读 · 1 评论 -
css实现幽灵按钮
css使用过渡,使用幽灵按钮。原创 2022-08-10 14:08:46 · 236 阅读 · 0 评论 -
css函数:var()
css中的函数var()原创 2022-08-09 13:49:50 · 184 阅读 · 0 评论 -
css实现风车效果
使用CSS实现风车效果。原创 2022-08-09 09:25:15 · 657 阅读 · 0 评论 -
css实现日出日落效果
css实现日出日落效果。原创 2022-08-09 09:13:29 · 891 阅读 · 0 评论 -
css实现太阳升起效果
使用css动画实现太阳升起效果。原创 2022-08-09 09:02:35 · 652 阅读 · 0 评论 -
css实现元素由远及近的效果
需求描述】transform实现元素由远及近的效果。原创 2022-08-08 14:11:24 · 1133 阅读 · 0 评论 -
css实现状态平滑的动画
假设有一张非常长的宽幅照片,但它的容器只是一个尺寸为150*150的正方形区域。默认显示这张图片的左边缘,当鼠标悬停或聚焦在图片上时,图片滚动显露出剩余的部分原创 2022-08-06 12:53:50 · 240 阅读 · 0 评论 -
box-shadow实现一个按钮
box-shadow实现一个按钮。原创 2022-08-05 14:35:36 · 137 阅读 · 0 评论 -
单行或多行文本溢出,省略号代替
多行文本溢出,省略号代替相关链接【css】文本过长时省略号代替【微信小程序】文本的展开与收起原创 2022-06-22 15:26:54 · 83 阅读 · 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 · 926 阅读 · 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 · 147 阅读 · 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 · 159 阅读 · 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 · 529 阅读 · 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 · 4492 阅读 · 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 · 328 阅读 · 0 评论 -
【css】实现自适应背景区域的背景图像
文章目录background-sizebackground-size:coverbackground-size:containbackground-size:100%background-size:100% 100%实现与背景图像自适应的背景区域参考文章background-sizebackground-size:cover背景图像会依照自己原有的宽高比进行缩放以完全覆盖背景区域。如果背景区域与背景图像的大小不一致时,背景区域优先,因此会对背景图像的大小进行裁剪,于是背景图像会有部分不可见。比如,原创 2020-12-20 18:33:21 · 546 阅读 · 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 · 350 阅读 · 0 评论 -
【微信小程序】文本的展开与收起
文章目录详细代码相关说明参考文章详细代码app.json的内容如下{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#07c160", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"white" },原创 2020-11-18 11:00:26 · 1837 阅读 · 1 评论 -
【微信小程序】Flex布局
flex-directionrow默认值,默认水平轴是主轴,垂直轴是交叉轴。column此时,垂直轴是主轴,水平轴是交叉轴。justify-content决定如何分配主轴的剩余空间align-content决定如何分配交叉轴的剩余空间align-items决定Flex项在交叉轴上的对齐方式...原创 2020-11-02 13:26:00 · 1265 阅读 · 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 · 197 阅读 · 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 · 1337 阅读 · 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 · 1765 阅读 · 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 · 2850 阅读 · 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 · 512 阅读 · 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 · 281 阅读 · 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 · 578 阅读 · 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 · 416 阅读 · 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 · 391 阅读 · 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 · 194 阅读 · 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 · 440 阅读 · 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 · 1165 阅读 · 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 · 2050 阅读 · 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 · 2645 阅读 · 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 · 488 阅读 · 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 · 395 阅读 · 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 · 829 阅读 · 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 · 607 阅读 · 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 · 338 阅读 · 0 评论