CSS
关注
分享
扫一扫
CSS
臧小川
我很酷 你想跟我一样酷吗 关注我吧
展开
-
CSS：目前正在使用的桌面。
结构 <div class="snow-container"> <h1 class="h1" data-spotlight="Hello World">Hello World</h1> <div class="snow foreground"></div> <div class="snow foreground layered"></div> <div class="snow mid原创 2021-09-29 15:09:31 · 140 阅读 · 0 评论
-
时钟卡片翻转效果
/原创 2023-07-06 15:33:35 · 190 阅读 · 0 评论 -
CSS 不可选中文字
Document 我是一段不愿意分享的文字 // 1 contextmenu 我们可以禁用右键菜单原创 2022-07-28 13:37:22 · 962 阅读 · 0 评论 -
会弹跳的球
效果图JSimport React from 'react';import styles from './style.less'const index = () =>{ return ( <div className={styles.warp}> <div className={styles.container}> <div className={styles.bubble}>原创 2022-05-01 16:56:40 · 212 阅读 · 0 评论 -
背景动态变化登陆界面
效果图JSimport styles from './style.less'const index = () =>{ return ( <div className={styles.wrap}> <div className={styles.container}> <div className={styles.title}>登陆</div>原创 2022-04-16 01:54:57 · 2029 阅读 · 1 评论 -
多个数组返回随机数据
效果图JSimport React, { useEffect } from 'react';import styles from './style.less'const contentStyle = { fontSize: '20px', position: 'relative', width: '230px', height: '100px', overflow: 'hidden', display: 'flex', flexDirect原创 2022-02-16 13:59:19 · 162 阅读 · 0 评论 -
隐藏进度条
::-webkit-scrollbar { // 隐藏进度条 display: none; /* Chrome Safari */ }原创 2022-02-15 11:56:20 · 763 阅读 · 0 评论 -
react：滑动切换注册登录
效果图JSimport React, { useEffect, useState, useRef } from 'react'import { message } from 'antd';import styles from './style.less'const contentStyleShow = { transform: 'translateX(80%)'}const contentStyleHide = { transform: 'translateX(0%)'}原创 2022-01-17 17:53:13 · 1180 阅读 · 0 评论 -
仿轮播图小圆点
效果图结构 <div class="box"> <ul> <li> <button></button> </li> <li> <button></button> </li> <原创 2022-01-20 15:45:34 · 112 阅读 · 0 评论 -
自定义input-date样式
效果图结构 <input type="date" />样式input { position: relative; width: 260px; height: 60px; font-size: 30px; background-color: rgb(84, 82, 161); border: 1px solid #ccc; border-radius: 2px; box-shadow: inset 0 1px #fff, 0 1px #eee;}原创 2022-01-12 15:39:46 · 2776 阅读 · 0 评论 -
css样式初始化
效果图或者直接引用 normalize<!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"&g原创 2022-01-10 16:02:16 · 355 阅读 · 0 评论 -
仿腾讯视频按钮
效果图indeximport React from 'react'import styles from './style.less'import { LeftOutlined, RightOutlined } from '@ant-design/icons';const contentStyle = { // 是背景渐变 而不是给文字添加颜色 所需要的属性 cursor: 'pointer', WebkitBackgroundClip: 'text', WebkitTe原创 2022-01-10 15:35:24 · 137 阅读 · 0 评论 -
纯CSS实现猫咪
效果图indeximport React from 'react'import styles from './style.less'const index = () =>{ return ( <div> <div className={styles.container} > <div className={styles.wrapper}>原创 2022-01-10 11:36:15 · 333 阅读 · 0 评论 -
CSS自定义鼠标样式
效果图原理cursor属性：cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。使用url，可自定义鼠标图标。 cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat6.ico'), default;自定义图标注意点尺寸最好选择不大于于32*32像素的Opera 9.3 和 Safari 3 不支持 url 值图片最好用绝对路径浏览器兼容性不一原创 2022-01-10 11:09:49 · 1451 阅读 · 0 评论 -
CSS-文字超出省略号 触碰提示文字
效果图<!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&原创 2021-12-09 12:27:08 · 288 阅读 · 0 评论 -
CSS-实现文字增加渐变
效果图<!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&原创 2021-12-09 12:19:40 · 130 阅读 · 0 评论 -
动画边框效果
结构 <div class="container"> <h1> Animated-CSS </h1> </div>CSS body { margin: 0; padding: 0; box-sizing: border-box; font-family: arial;原创 2021-11-15 11:09:30 · 97 阅读 · 0 评论 -
CSS：正在使用的电脑桌面2
结构<div class="snow-container"> <h1 class="h1" data-spotlight="Hello World">Hello World</h1> <div class="snow foreground"></div> <div class="snow foreground layered"></div> <div class="snow middl原创 2021-09-29 16:20:49 · 143 阅读 · 0 评论 -
CSS3烟花
<div id="container"> <h1 class="h1" data-spotlight="Hello World">Hello World</h1> <div class="firework-grp"> <div class="firework pos1 "> <div class="drops-grp"> <span class="drop dro..原创 2021-09-29 14:47:37 · 277 阅读 · 0 评论 -
Css3下雪
也是我最近使用的桌面 再也不用担心下班忘记打卡了！！！结构<div class="snow-container"> <h1 class="h1" data-spotlight="Hello World">Hello World</h1> <div class="snow foreground"></div> <div class="snow foreground layered"></div>.原创 2021-09-29 14:16:43 · 137 阅读 · 0 评论 -
CSS 行高1.5与150%的区别
行高1.5HTML结构<div> 如果我是dj 你还爱我吗 </div> <p>嘿嘿嘿嘿嘿嘿嘿嘿</p>CSS body { font: 18px/1.5 "微软雅黑"; } div { width: 200px; font-size: 32px; /* 子元素继承了父元素body的行高1.5 */ /* 这个1.5就是当前元素值文字大小font-siz原创 2021-09-26 10:48:25 · 795 阅读 · 0 评论 -
CSS特效-下雨天效果
HTML <div id="rain"> <h1 class="h1" data-spotlight="Hello World">Hello World</h1> </div>CSS body { font-family: "Arial", "Microsoft YaHei", "黑体", sans-serif; margin: 0; padding: 0; } #rain { display:.原创 2021-09-23 08:35:19 · 1076 阅读 · 0 评论 -
下划线和父级宽度一样宽
HTML<div class="box1"> <span> 我的下划线占全屏 </span> <div class="fade"></div> </div> <div class="box2"> <span> 这个跟我的盒子宽度一样长 </span> <div class="fade"></div&g.原创 2021-09-17 09:53:41 · 210 阅读 · 0 评论 -
跳动+霓虹+聚光灯
<h1 class="h1" data-spotlight="Hello World">Hello World</h1> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Helvetica; } html { font-size: 15px; } body { background: li...原创 2021-09-12 17:51:46 · 127 阅读 · 1 评论 -
CSS特效-霓虹聚光灯效果
<h1 class="h1" data-spotlight="Hello World">Hello World</h1> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Helvetica; } html { font-size: 15px; } body { background: l...原创 2021-09-12 16:36:10 · 178 阅读 · 0 评论 -
CSS特效-聚光灯效果
<h1 class="h1" data-spotlight="Hello World">Hello World</h1> html { font-size: 15px; } body { padding: 0; margin: 0; background-color: #222; display: flex; justify-content: center; align-...原创 2021-09-12 15:52:31 · 624 阅读 · 0 评论 -
CSS五款超好用的布局网站
CSS Grid Generator： https://cssgrid-generator.netlify.app/CSS Layout： https://csslayout.io/Flexbox Generator：https://loading.io/flexbox/行数列数快速布局： cssgr.idhttps://grid.layoutit.com/原创 2021-09-12 15:13:20 · 5093 阅读 · 0 评论 -
HTML+CSS 霓虹灯效果
<h2 contenteditable="true">HELLO WORLD</h2>* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; } body { display: flex; align-items: center; justify-content: center; ..原创 2021-09-08 11:20:57 · 522 阅读 · 0 评论 -
px、em和rem的区别
px：字体大小em：父级元素的字体大小；rem：html的字体大小原创 2021-09-05 01:23:59 · 117 阅读 · 0 评论 -
flex:1 是什么意思
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：div { flex:1;}原创 2021-09-05 01:13:34 · 299 阅读 · 0 评论 -
DIV盒子垂直居中水平居中
HTML <div class="parent"> <div class="child"></div> </div>CSS.parent { background-color: rgb(204, 48, 74); width: 200px; height: 200px; } .child { background-color: rgb(39, 175, 57); width: 100px;原创 2021-09-05 01:10:27 · 156 阅读 · 0 评论 -
pointer-events: none；解决鼠标事件穿透到子盒子
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够：阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件不添加pointer-events: none样式效果图添加pointer-events: no原创 2021-09-02 11:14:34 · 456 阅读 · 0 评论 -
CSS实现盒子上下频繁抖动
加个动画就能实现 实际中不需要底下那么多代码<!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">.原创 2021-08-30 14:15:33 · 835 阅读 · 0 评论 -
利用伪元素实现div背景图旋转 div内容不旋转
朋友今天有这么个需求 DIV 放背景图 翻转180deg 且文字不翻转 还要做成动画 直接cv不解释效果图源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=.原创 2021-08-28 00:26:07 · 1105 阅读 · 0 评论 -
CSS简介
什么是CSSCSS是Cascading Style Sheet的缩写，层叠样式表，是一种用来表现文件样式的计算机语言。1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。3.CSS拥有对网页对象和模型样式编辑的能力。4.在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。...原创 2021-08-27 11:54:47 · 253 阅读 · 0 评论