神奇的css
文章平均质量分 77
css动画等
苏苏哇哈哈
宇宙无敌超级美少女程序员| 苏苏的bug
展开
-
不要图片?CSS实现圆角边框渐变色+背景透明
👏不要图片?CSS实现圆角边框渐变色+背景透明,最近在工作中常常实现这些效果,速速来Get吧~🥇文末分享源代码。苏苏的bug。原创 2023-06-04 01:55:08 · 8973 阅读 · 0 评论 -
不要图片?CSS实现大屏常见不规则边框(系列一)
不要图片?CSS实现大屏常见不规则边框(系列一)原创 2023-03-28 00:07:47 · 3096 阅读 · 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 评论 -
鼠标悬浮按钮实现一些炫酷的按钮(毛玻璃效果)
1.实现效果2.实现原理伪元素渐变transition过渡效果box-shadow阴影transform对元素进行旋转、缩放、移动或倾斜animation动画3.实现代码(直接上代码,需要的小伙伴自取)<style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #292929; min-widt原创 2021-10-23 01:12:43 · 984 阅读 · 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.实现原理cursor属性:cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。可能的值:使用url,可自定义鼠标图标。语法{cursor:url('图标路径'),default;}eg:* { cursor: url(cur/Handwriting.cur), default;}注意:不同浏览器对自定义图标的兼容性不一,要设置一个默认的普通图标,如default,pointer等。3.自定义图标注意点原创 2021-10-17 00:52:26 · 3947 阅读 · 0 评论 -
实现px和vw的转换
1.实现效果2.px,em,rem,vw,%,vm1.pxpx其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。2、emem是相对长度单位。相对于当前对象内本文的字体尺寸(如果没有设置本文尺寸,那就是相对于浏览器默认的字体尺寸,也就是16px),这样计算的话。如果没有设置字体尺寸就是1em = 16原创 2021-07-15 19:56:08 · 7311 阅读 · 0 评论 -
子元素的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实现流星划过动画
👏渐变+伪元素实现流星,translateY实现划过动画,速速来Get吧~ 🥇文末分享源代码。记得点赞+关注+收藏!原创 2022-11-16 01:32:08 · 1659 阅读 · 0 评论 -
css实现一个弹框的动画(animation)
1.实现效果2.实现代码<div class="box" id="box">展示苏苏的二维码</div><div class="codeBox" id="code_box"> <div id="hide"> <img src="./susu.png" /> </div></div>body { padding: 0; margin: 0; display: flex; height: 100vh原创 2021-10-18 21:46:41 · 5379 阅读 · 0 评论