css
文章平均质量分 62
神奇的css
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
不要图片?CSS实现大屏常见不规则边框(系列一)
不要图片?CSS实现大屏常见不规则边框(系列一)原创 2023-03-28 00:07:47 · 3097 阅读 · 6 评论 -
CSS实现checkbox选中动画
👏CSS实现checkbox选中动画,速速来Get吧~🥇文末分享源代码原创 2023-03-02 00:36:20 · 2595 阅读 · 3 评论 -
Clip-path实现按钮流动边框动画
👏Clip-path实现按钮流动边框动画,速速来Get吧~🥇文末分享源代码原创 2023-02-11 16:49:39 · 1423 阅读 · 0 评论 -
CSS 实现灯笼动画,祝大家元旦快乐
👏CSS 实现大红灯笼动画,祝大家元旦快乐,2023越来越棒!速速来Get吧~🥇文末分享源代码原创 2022-12-31 00:03:59 · 5223 阅读 · 5 评论 -
CSS 实现七彩圆环loading动画
👏CSS 实现七彩圆环loading动画,速速来Get吧~🥇文末分享源代码原创 2022-12-30 00:28:52 · 4066 阅读 · 0 评论 -
SVG 实现拟物态圆环进度条
SVG 实现拟物态圆环进度条原创 2022-12-11 23:59:55 · 1005 阅读 · 0 评论 -
CSS 实现一个3d魔方
👏CSS 实现一个3d魔方,速速来Get吧~原创 2022-12-10 23:55:41 · 1136 阅读 · 0 评论 -
CSS 实现鼠标hover 展示内容
CSS 实现鼠标hover 展示内容,速速来Get吧!文末分享源代码。记得点赞+关注+收藏!原创 2022-12-08 23:45:51 · 9373 阅读 · 3 评论 -
CSS 实现音频loding动画
CSS 实现音频loding动画原创 2022-12-06 22:44:55 · 2955 阅读 · 1 评论 -
CSS 实现卡片边框渐变动画
CSS @property属性实现卡片边框渐变动画,速速来Get吧~ 🥇文末分享源代码。记得点赞+关注+收藏!原创 2022-12-05 23:01:14 · 1799 阅读 · 0 评论 -
Grid 布局实现九宫格图片动画
Grid 布局实现九宫格,background-position设置背景图像起始位置,速速来Get吧原创 2022-12-04 18:02:22 · 1595 阅读 · 0 评论 -
CSS 实现跳动的方块动画
transform-style+transform实现多个小方块,速速来Get吧~原创 2022-12-02 23:19:18 · 2306 阅读 · 2 评论 -
css3实现一个3d楼梯动画
通过给出的宽/高+个数,用css3的transform以及transform-style快速的实现一个3d楼梯,速速来Get吧~原创 2022-11-30 01:17:46 · 805 阅读 · 0 评论 -
vue自定义全局loading加载组件
1.实现效果2.实现原理Vue.extend:extend 创建的是 Vue 构造器,可通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。vue中install方法:export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 }}3.实现代码新建components文件夹-新建loading001文件夹-新建index.vue+index.jsindex.原创 2022-03-10 23:52:29 · 3827 阅读 · 1 评论 -
css3动画+svg实现水球进度条
css3动画+svg实现水球进度条原创 2022-11-10 00:11:51 · 1791 阅读 · 2 评论 -
css实现一个温度计图表
vue3中封装一个温度计图表组件原创 2022-10-21 13:21:15 · 2897 阅读 · 1 评论 -
css实现椭圆绕圈动画
css实现椭圆绕圈动画,rotate3D原创 2022-09-07 18:07:02 · 3152 阅读 · 2 评论 -
css实现input搜索框展开动画
css实现三个input搜索框展开动画原创 2022-09-02 01:04:56 · 2868 阅读 · 0 评论 -
css实现炫酷的圆环相交转动动画
css实现炫酷的圆环相交转动动画原创 2022-08-24 23:31:08 · 2000 阅读 · 0 评论 -
微信小程序引导用户添加小程序动画页
微信小程序引导用户添加小程序动画页原创 2022-06-19 23:26:51 · 2252 阅读 · 3 评论 -
微信小程序实现tab选中(特殊圆角)样式
1.实现效果2.实现原理前3个常规设置即可,这里说下第四个样式可以看到,这边有个超出的圆角样式。两种思路:将整个父元素设置线性渐变色背景,上下两部分。设置单个元素的伪元素,伪元素部分设置径向渐变思路一:为父元素设置线性渐变背景background: linear-gradient(180deg, #d6001f 50%, #fff 50%);将子元素设置相应的border-radius,不同的背景色,这一步已经可以看到我们想要的特殊圆角了,接着把选中与不选中的颜色,设置与原创 2022-04-09 21:46:58 · 3798 阅读 · 2 评论 -
微信小程序实现城市索引选择+搜索
1.实现效果2.实现原理scroll-view:可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。scroll-into-view:值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素为列表中的字母索引添加相应id,当触摸右侧固定侧边栏时候,动态设置当前id值,实现锚点定位。搜索城市时,隐藏其他数据,根据搜索值去匹配(in原创 2022-04-04 22:26:19 · 5126 阅读 · 4 评论 -
微信小程序map+腾讯地图sdk实现拖拽定位,逆地址解析
1.实现效果2.如何使用腾讯地图sdk2.1申请开发者密钥(key)申请地址创建应用添加key,这个key值就是后面在程序中用到的key值选择WebSweviceApi,开启这项,才能调逆地址解析接口2.2 WebService API使用文档腾讯地图WebService API 是基于HTTPS/HTTP协议的数据接口,开发者可以使用任何客户端、服务器和开发语言,按照腾讯地图WebService API规范,按需构建HTTPS请求,并获取结果数据(目前支持JSON/J原创 2022-03-25 19:22:15 · 4592 阅读 · 0 评论 -
微信小程序实现拆红包动画
1.实现效果2.实现原理wx.createAnimation(Object object):创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。点击红包,弹出红包弹框,用到过渡动画this.animation.translate('-50%', '-50%').step();关闭弹框this.animation.translate('-50%', '100%').step();原创 2022-03-24 00:05:24 · 2255 阅读 · 0 评论 -
微信小程序实现堆叠式轮播
1.实现效果2.实现原理1.css的var()函数var() 函数用于插入自定义属性的值,而不是另一个属性的值的任何部分。语法:var(custom-property-name, value)eg::root { --main-bg-color: coral; --main-txt-color: blue; --main-padding: 15px; }#div1 { background-color: var(--main-bg-color); color:原创 2022-02-20 23:12:16 · 3051 阅读 · 4 评论 -
子元素的margin-top为什么会影响父元素?
1.两个元素,当你为子元素设置margin-top的时候,你会发现什么呢?2.解决方法父元素设置1-overflow: hidden2-display: inline-block;或者float布局3-border: 1px solid transparent; 4-position: absolute原创 2022-02-18 00:08:11 · 3107 阅读 · 0 评论 -
微信小程序实现一些炫酷的loading动画
1.实现效果2.实现原理.伪元素.css3动画.transform3.实现代码从上到下,从左到右依次的代码如下<!--pages/subPack/loading/index.wxml--><view class="title">样式一:</view><view class="ring"> <view>sss</view> <view class="line"></view><原创 2022-02-17 23:33:25 · 4411 阅读 · 0 评论 -
CSS @property属性实现了什么?
1.@property是什么@property 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性,允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。(兼容性不是很好)CSS Houdini开放 CSS 的底层 API 给开发者,使得开发者可以通过这套接口自行扩展CSS,并提供相应的工具允许开发者介入浏览器渲染引擎的样式和布局流程中,使开发人员可以编写浏览器可以解析的 CSS 代码,从而创建新的CSS 功能。2.如何使用语法@原创 2022-02-16 23:29:58 · 775 阅读 · 0 评论 -
css实现背景色高斯模糊
1.实现效果2.实现原理1.filter:blur()2.伪元素设置,不影响子元素显示3.实现代码<view class="award a">苏苏小苏苏</view><view class="award ">苏苏小苏苏</view>/* pages/another/filterBlur/index.wxss */page { background: #ffbb5e; margin-top: 50px;}.award { w原创 2022-02-15 22:42:27 · 2255 阅读 · 0 评论 -
css的animation实现充电式loading加载动画
1.实现效果2.实现原理div+伪元素实现外边框样式渐变+伪元素实现内部波浪动画,实现在一定时间内,内部波浪高度的0到100%3.实现代码<div class="box"> <div class="charge"> <div class="wave"></div> </div></div>.box { margin: 20px auto; width: 685px; height: 250px; ba原创 2021-12-12 19:31:17 · 430 阅读 · 0 评论 -
微信小程序实现上下循环滚动的swiper弹幕条
1.实现效果2.实现原理2.1swiper:滑块视图容器。其中只可放置swiper-item组件。vertical 设置为true,滑动方向为纵向。2.2当只有一条数据的时候,手动添加一个新的swiper-item,再一条数据的情况下,依旧循环滚动。3.实现代码<swiper class="new_swiper" vertical="true" autoplay="true" circular="true" interval="2000" duration="1500" display原创 2021-11-17 20:55:37 · 4812 阅读 · 0 评论 -
微信小程序实现打卡(翻转效果)
1.实现效果原创 2021-11-16 23:17:42 · 3116 阅读 · 1 评论 -
微信小程序实现自定义input输入框
1.实现效果2.实现原理1.微信小程序的input不支持letter-spacing的属性2.将input的宽度设置成250%(注意,父元素需要设置overflow:hidden,否则在苹果手机上将出现滑动),并设置absolute定位将input输入框定位出当前页面。3.将input输入的值用absolute定位到4个框框里面,设置letter-spacing将文字隔开。3.实现代码/* pages/subPack/customIpt/index.wxss */.dialog_pop03原创 2021-11-15 19:26:53 · 10093 阅读 · 0 评论 -
微信小程序一定高度文字的展开与收起
1.实现效果2.实现思路1.给文字设置相应的行高,假设想展示10行文字,此时设置一个最大高度是10*文字的行高。2.获取当前文字盒子的整体高度,若大于设置的高度,添加overflow:hidden,height:最大高度;反正不添加样式,不显示箭头。3.显示展开的箭头提示,当点击展开箭头时,切换图片,并不设置最小高度,文字展开。3.实现代码<view class="con"> <view class="tips"> <view class="{{hei原创 2021-11-11 19:39:36 · 2441 阅读 · 0 评论 -
css实现不定长卡券
1.实现效果2.实现代码2.1重点代码:不设置宽度用padding撑开父元素min-width: 67px;display: inline-block;padding: 0 10px;2.2完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> * {原创 2021-11-09 12:43:56 · 136 阅读 · 0 评论 -
支付宝小程序实现自定义头部导航栏
1.实现效果原创 2021-11-03 09:19:40 · 3704 阅读 · 0 评论 -
支付宝小程序实现swiper指示点自定义
1.实现效果2.关键类名:.a-swiper-indicator.a-swiper-dot.a-swiper-dot-active3.实现代码 <swiper class="swiper_box" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{1000}}" circular="true"> <swiper-item a:for="{{banner}}" a:ke原创 2021-11-02 23:06:59 · 936 阅读 · 0 评论 -
css渐变+伪元素实现卡券样式
1.实现效果2.实现原理渐变用到的是:radial-gradientlinear-gradient标题 3.具体实现demo1:.circle01 { width: 300px; height: 100px; position: relative; background-color:#ff6810 ; background:radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/3原创 2021-10-31 23:03:34 · 511 阅读 · 0 评论 -
微信小程序实现自定义头部导航栏(详细)
1.实现效果2.实现原理2.1获取胶囊的详细信息let menuButtonObject = wx.getMenuButtonBoundingClientRect();width:胶囊的宽度;height:胶囊的高度top:胶囊距离顶部的距离2.2获取导航栏的整体高度wx.getSystemInfo({ success: res => { let statusBarHeight = res.statusBarHeight,navTop = menuButtonO原创 2021-10-26 23:01:24 · 5298 阅读 · 2 评论 -
css实现一个带半圆形状的卡片
1.实现效果2.实现原理半圆+伪元素原创 2021-10-25 09:22:19 · 965 阅读 · 0 评论