css
关注
分享
扫一扫
文章平均质量分 60
DevilAngelia
学无止境
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS 过渡、动画
hover过渡效果 圆圈内收缩 <style> html { --size: 1.5rem; --color: #5fa04e; } .box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .hovers {原创 2022-05-06 10:01:13 · 240 阅读 · 0 评论 -
jquery鼠标移动、点击页面出现爱心
爱心 1、css画一个爱心 .main{ width: 20px; position: fixed; } // 圆形一 .disc1{ width: 20px; height: 20px; border-radius: 100%; /*background: red;*/ position: absolute; top: 0; left: 0; z-index: 2; } // 圆形二 .disc2{ width: 20原创 2021-08-24 17:20:08 · 565 阅读 · 0 评论 -
ColorUI 使用文档
ColorUI 简易 使用文档 友情链接 文本大小 颜色 图片 头像 边距 布局 列表 友情链接 ColorUI使用文档 看云： https://www.kancloud.cn/als24/color/1141392 ColorUI H5 H5： http://demo.color-ui.com/h5.html#/ 原文链接 简书： https://www.jianshu.com/p/450527d7239a#comments 文本大小 xs sm df lg xl xxl sl xsl原创 2021-08-06 11:03:10 · 10582 阅读 · 0 评论 -
CSS 计数器 九宫格 超出9个显示多出的数量
一、CSS 计数器 counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 counter() 或 counters() 函数 - 将计数器的值添加到元素 使用 在元素父级创建一个计数器 .list { counter-reset: count; } 子级中使用伪类显示数量 .item::after { counter-increment: count; } 二、实践 先预览一下吧 CSS代码 * {原创 2021-07-14 16:18:49 · 455 阅读 · 0 评论 -
表单滑动验证
滑动验证 效果—↓↓↓ 滑动前 滑动中 滑动完成 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>滑动验证</title> <link rel="stylesheet" type原创 2021-06-18 11:50:18 · 317 阅读 · 0 评论 -
纯CSS 3D旋转立体画册 第一弹
纯CSS 3D旋转立体画册 第一弹效果 外层盒子+动画 效果 盒子 鼠标移入 HTML <div class="content flex col-center row-center"> <div class="hover"> <!-- 立方体三维图片展示 --> <div class="box"> <div class="item"></div> <div class="item"></di原创 2021-06-17 18:23:31 · 344 阅读 · 0 评论 -
JavaScript CSS 线性进度条
JS CSS 进度条 html <div id="show" class="show"> <div class="box"> <div class="line-box" id="line_box"> <div class="line" id="line"></div> </div> <div id="num" class="num">0%<原创 2020-12-26 16:04:04 · 387 阅读 · 1 评论