CSS
关注
分享
扫一扫
文章平均质量分 86
CSS样式，每周更新
timi先生
我懒，还写了签名️
展开
-
龙年快乐，大烟花
烟花秀：源码：<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>2024新年快乐！万事如意！</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <met原创 2024-01-26 10:03:13 · 849 阅读 · 0 评论 -
按住才能解锁的按钮
前些天发现了一个人工智能学习网站，通俗易懂，风趣幽默，最重要的屌图甚多，忍不住分享一下给大家。原创 2024-01-05 13:49:36 · 417 阅读 · 0 评论 -
冬天，就要有冬天的404
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。原创 2023-12-25 14:46:31 · 78 阅读 · 0 评论 -
圣诞节快乐
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。圣诞节快到了，分享一个圣诞树给大家~ 效果展示：源码分享：<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" ><defs> <circle id="circ" class="p原创 2023-12-22 11:22:46 · 153 阅读 · 0 评论 -
分享一个冬日雪景
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。先看效果：再看源码：<body> <div id="container"> <div id="layer-1" class="layer"> <svg id="front-tree-1" viewBox="0 0 131.33362 251.64629" xmlns="http://www.w3.org/2000/svg">原创 2023-12-18 14:30:24 · 145 阅读 · 0 评论 -
某音上很火的圣诞树分享
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。原创 2023-12-10 18:56:38 · 23008 阅读 · 26 评论 -
分享一个鬼~
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。先看效果：上源码：import GUI from "https://cdn.jsdelivr.net/npm/lil-gui@0.18.2/+esm"const canvasEl = document.querySelector("#ghost");const mouseThreshold = .1;const devicePixelRatio = Math.min(window.device原创 2023-11-25 15:29:50 · 610 阅读 · 0 评论 -
分享一个卡片轮播
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。原创 2023-11-22 10:58:29 · 254 阅读 · 0 评论 -
分享一个课程卡样式
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。广告打完，我们进入正题，先看效果：废话不多，上源码：<body> <h3 class="text-center fw-bold"><i class="fa-brands fa-medium pe-3"></i>Lottie Cards</h3> <div class="hr-line mt-4 mb-4"></div&原创 2023-11-20 15:41:45 · 215 阅读 · 0 评论 -
有趣的按钮分享
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。原创 2023-11-17 09:47:35 · 458 阅读 · 0 评论 -
分享一个图像轮播效果
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。话不多说，先看效果：根据图片的播放，页面背景会被替换为当前图片。老规矩，源码自己拿：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="module" sr原创 2023-11-16 16:35:02 · 127 阅读 · 1 评论 -
页面页脚部分CSS分享
【代码】页面页脚部分CSS分享。原创 2023-09-04 19:57:28 · 986 阅读 · 0 评论 -
投票同款特效样式
先看效果：再看代码（查看更多）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");原创 2023-08-31 19:45:08 · 136 阅读 · 0 评论 -
没有 JavaScript 计时器的自动播放轮播 - CSS 动画
先看效果：再看代码（查看更多）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计时器</title> <style> * { padding: 0; margin: 0; box-sizing: border-box原创 2023-08-29 20:35:11 · 747 阅读 · 0 评论 -
3D角色展示
【代码】3D角色展示。原创 2023-08-21 19:50:15 · 1185 阅读 · 0 评论 -
Steam 灵感的游戏卡悬停效果
【代码】Steam 灵感的游戏卡悬停效果。原创 2023-08-15 19:05:16 · 1184 阅读 · 0 评论 -
咬牙切齿的按钮
【代码】咬牙切齿的按钮。原创 2023-08-14 19:39:24 · 134 阅读 · 0 评论 -
在线吉他调音
先看效果（图片没有声，可以下载源码看看，比这更好~）：再看代码（查看更多）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在线吉他调音</title> <style> :root { --dark: #282828; --black: #0原创 2023-08-13 12:31:46 · 1863 阅读 · 0 评论 -
分享一组天气组件
【代码】分享一组天气组件。原创 2023-08-12 15:24:33 · 1017 阅读 · 0 评论 -
分享一个计算器
先看效果：再看代码（查看更多）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <style> * { box-sizing: border-box; } body { height:原创 2023-08-08 20:15:47 · 2563 阅读 · 0 评论 -
分享一个霓虹灯拨动开关
先看效果：再看代码（查看更多）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> 霓虹灯拨动开关</title> <style> * { border: 0; box-sizing: border-box; margi原创 2023-08-07 20:27:14 · 156 阅读 · 0 评论 -
分享一个页面
先看效果：看下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>顶部或底部特效</title> <style> @import url(//fonts.googleapis.com/css?family=Lato:300:400); body {原创 2023-08-05 11:51:08 · 169 阅读 · 0 评论 -
一条自由游动的鲸鱼
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鲸鱼</title> <style> #canvas-container { width: 100%; height: 100vh; overflow原创 2023-08-02 20:15:35 · 879 阅读 · 0 评论 -
分享一个赛车动画
先看效果（动画太大了放不上来，甘心去复制代码运行即可）：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>赛车</title> <style> * { margin: 0; padding: 0; box-siz原创 2023-07-31 20:19:05 · 243 阅读 · 0 评论 -
分享几个水滴效果的按钮
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水滴效果的按钮</title> <link rel="stylesheet" href="https://codepen.io/nicolasjesenberger/pen/GRYvOWy/d5176f9552830811da3e2bde012原创 2023-07-25 19:19:44 · 248 阅读 · 0 评论 -
分享一个点赞特效
先看效果：再看代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点赞</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap" type="text/css"原创 2023-07-20 17:27:08 · 262 阅读 · 0 评论 -
分享一个唯美雪花界面
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>雪</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="w原创 2023-07-19 19:59:38 · 1913 阅读 · 0 评论 -
分享一个加载按钮动画
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加载动画按钮</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> <styl原创 2023-07-18 16:17:43 · 179 阅读 · 0 评论 -
分享一个放烟花的特效
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container { position: absolute; inset: 0; background原创 2023-07-11 20:10:29 · 306 阅读 · 0 评论 -
若隐若现的芯片
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>若隐若现的芯片</title> <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <style> body {原创 2023-06-29 19:43:30 · 1912 阅读 · 0 评论 -
分享一个上传按钮
不要害怕，文件没有传上任何地方，这里只是模拟一下而已~原创 2023-06-29 19:39:11 · 696 阅读 · 0 评论 -
隐藏菜单之菜单和搜索
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单</title> <style> /* css代码开始*/ * { margin: 0; padding: 0; box-sizi原创 2023-06-27 20:42:44 · 743 阅读 · 0 评论 -
404系列之404界面
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>404</title> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :原创 2023-06-27 20:34:30 · 274 阅读 · 0 评论 -
分享一个可交互的小场景（一）
先看效果： 可互动的小场景 再看代码：1、代码较长，分成了几部分上传，先看头部和CSS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可交互的小场景</title> <style>原创 2023-06-25 20:46:36 · 737 阅读 · 0 评论 -
分享一组开关按钮
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>豆子开关</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight原创 2023-06-23 08:00:00 · 230 阅读 · 0 评论 -
分享一个下载按钮
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下载按钮</title> <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" type="text/css" rel="stylesheet原创 2023-06-22 20:19:18 · 1092 阅读 · 0 评论 -
凹下去的白色按钮
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>凹下去的按钮</title> <style> @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap");原创 2023-06-21 10:53:03 · 5071 阅读 · 2 评论 -
一组网格加载动画
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网格动画</title> <style> @import url("https://fonts.googleapis.com/css2?family=Orbitron&family=Quicksand:wght@3原创 2023-06-15 20:13:12 · 1133 阅读 · 0 评论 -
烟雾调节器
先看效果： 烟雾调节展示 再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可调节的烟雾特效</title> <script src="https://cdnjs.cloudflare.co原创 2023-06-14 19:27:54 · 391 阅读 · 0 评论 -
分享一个玉质按钮
先看效果：再看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:原创 2023-06-14 19:08:15 · 255 阅读 · 0 评论