css
青衫折扇
互联网发展迅速,使我们的脚步更快,生活更好,环境变差,使人变得懒惰,有压力才会 让自己变得更强...
展开
-
css:transition tab切换 动态滑动效果
【代码】css:transition tab切换 动态滑动效果。原创 2023-01-12 21:00:43 · 1781 阅读 · 0 评论 -
纯css加载动画效果
想要源码或有问题可扫下方二维码下载或联系客服。原创 2023-01-04 11:09:32 · 597 阅读 · 0 评论 -
uni-app背景gif图(通过css消除背景色)
直接上代码.bg-ware { position: absolute; left: 0; bottom: -2rpx; width: 100%; mix-blend-mode: screen; height: 120rpx;}如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序...原创 2022-04-18 14:19:18 · 1247 阅读 · 0 评论 -
css 动画集合(亲测可用,完善中...)
/*弹层动画(从上往下)*/.fadeIn { -webkit-animation: fadeInDown .3s; animation: fadeInDown .3s;}@keyframes fadeInDown { 0% { -webkit-transform: translate3d(0, -20%, 0); -webkit-transform: translate3d(0, -20%, 0); transform: .原创 2021-10-08 16:28:08 · 296 阅读 · 0 评论 -
一行显示4个,超出自动换行(解决办法)
先看一下问题吧data() { return { myHealthAdminMenu: { name: '健康管理', list: [{ name: '基础信息', image: $mAssetsPath.iconHealth1, isAstrict: false }, { name: '健康档案', image: $mAssetsPath.iconHealth2, isAstrict: false }, { .原创 2021-09-18 16:05:13 · 4786 阅读 · 0 评论 -
css 实现漂亮的分割线
<div class="test"></div>.test { width: 100%; height: 10rpx; background-color: #fff; background-image: linear-gradient(0deg, rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%), linear-gradient(90deg, rgba($color: #ff6a00, $a.原创 2021-03-18 15:09:01 · 3898 阅读 · 0 评论 -
纯css14种气泡效果
http://www.bootstrapmb.com/item/1551原创 2021-02-26 14:42:05 · 1318 阅读 · 0 评论 -
css实现底部圆弧
页面布局如下:<view class="box"> 我是页面内容</view>//圆弧部分的高度是由box的高度决定的css部分代码如下所示:.box { position: relative;}.box::after { content: ''; width: 140%; height: 100%; position: absolute; left: -20%; top: 0; z-index: -1; border原创 2021-01-19 16:35:10 · 1970 阅读 · 0 评论 -
Css 实现漂亮弧形
在实现页面五花八门的有特色的ui时,我们有时会遇到要用实现一个弧形,而这样的弧形要怎么实现呢?用图片?好像不大现实,因为这样就要无故多加载一张图片了,这里我们来说说怎么用css的after伪类来实现弧形。先是一写元素,再给这个元素设置样式和伪类样式<view class="pure_top"></view>比如说这个pure_top元素(因为这里是小程序所以用的是view,h5也是一样实现的啦),我设置的样式如下:.pure_top { width: ..原创 2020-11-21 10:14:55 · 3289 阅读 · 1 评论 -
display: flex多栏多列布局(实例)
我们先来看看效果其实很简单,来看看代码具体怎么实现的吧wxml<!--pages/new/new-exclusive/index.wxml--><view class="new-exclusive"> <!-- 轮播图 S --> <swiper class="viewpager" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circula原创 2020-06-17 11:00:13 · 1424 阅读 · 0 评论 -
css让字体倾斜实现
一行代码解决font-style: oblique;看一下效果吧原创 2020-04-22 14:21:08 · 1302 阅读 · 0 评论 -
css使用transform设计常用形状
<view class='input_back' catchtap='hidePayLayer'><text></text><text></text></view>.input_back { position: absolute; left: 0; top: 0; width: 80rpx; hei...原创 2020-04-16 11:45:52 · 149 阅读 · 0 评论 -
css样式在列表最后一个没有样式效果
.address-msg:last-child { border-bottom: none;}很简单,就不过多解释那么多了原创 2020-04-01 16:23:02 · 1574 阅读 · 0 评论 -
css实现超出部分显示省略号
/*显示一行,省略号*/ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;/*显示两行,省略号*/text-overflow: -o-ellipsis-lastline; overflow: h...原创 2020-03-30 10:30:23 · 178 阅读 · 0 评论 -
分享10款漂亮的css按钮源码
1、Plastic Buttons地址:https://codepen.io/ben_jammin/pen/syaCq这组按钮设计很干净,它们有许多不同的颜色和尺寸,你可以轻松地重新设计这些按钮。有多种风格可以选择,小型,中型或大型按钮。 有默认按钮,禁用按钮和设计为开关或标签的按钮行。 对于纯CSS解决方案,这是Web上最干净的按钮样式之一。2、Cool Buttons地...原创 2020-01-03 15:00:50 · 1895 阅读 · 0 评论