随笔分类 -  CSS3

1 2 3 4 5 ··· 11 下一页
摘要:@use 'sass:math'; @use 'sass:string'; html { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100%; width: 100%; over 阅读全文
posted @ 2025-02-15 23:33 Zhentiw 阅读(0) 评论(0) 推荐(0) 编辑
摘要:PreProcessor Using Scss Install: pnpm add sass -D Code: // filename: src/views/404.vue <template> <div title="404">404</div> <p>Page Not Found</p> </t 阅读全文
posted @ 2025-02-13 04:03 Zhentiw 阅读(7) 评论(0) 推荐(0) 编辑
摘要:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Animation for auto height</title> <style> .btn { position: relative; border: no 阅读全文
posted @ 2025-02-10 00:39 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要:预处理器介绍 预处理器基本介绍 Sass 快速入门 预处理器基本介绍 平时在工作的时候,经常会面临这样的情况:需要书写很多的样式代码,特别是面对比较大的项目的时候,代码量会急剧提升,普通的CSS书写方式不方便维护以及扩展还有复用。 通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言, 阅读全文
posted @ 2025-01-25 19:09 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑
摘要:In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We' 阅读全文
posted @ 2024-12-09 15:49 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑
摘要:Identifying the containing block The process for identifying the containing block depends entirely on the value of the element's position property: If 阅读全文
posted @ 2024-12-01 16:58 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑
摘要:/* initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do th 阅读全文
posted @ 2024-11-26 20:33 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Houdini</title> < 阅读全文
posted @ 2024-11-24 19:54 Zhentiw 阅读(14) 评论(0) 推荐(0) 编辑
摘要:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>CSS avatar scale</title> <style> .avatar { width: 150px; height: 150px; backgro 阅读全文
posted @ 2024-10-05 19:56 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:@use 'sass:math'; .menu-item { opacity: 0; transition: 0.5s; } $r: 120px; $n: 6; $step: 360deg / $n; for $i from 1 through $n { .board:hover .menu-ite 阅读全文
posted @ 2024-09-03 20:45 Zhentiw 阅读(23) 评论(0) 推荐(0) 编辑
摘要:<style> dt { position: sticky; top: 0; } </style> <body> <dl> <dt>A</dt> <dd>Adrew W.K</dd> <dd>Adapter</dd> <dt>B</dt> <dd>Border</dd> <dd>Beef</dd> 阅读全文
posted @ 2024-08-29 15:17 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要:$breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'notebook': (769px, 1024px), 'desktop': (1025px, 1200px), 'tv': 1201px, ) @mixin respo 阅读全文
posted @ 2024-08-26 23:49 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:/* View Transitions */ /* STEP 1 */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1s; } /* STEP 2 */ @keyframes fade- 阅读全文
posted @ 2024-08-20 14:29 Zhentiw 阅读(37) 评论(0) 推荐(0) 编辑
摘要:max-content https://developer.mozilla.org/en-US/docs/Web/CSS/max-content The max-content sizing keyword represents the maximum intrinsic size of the c 阅读全文
posted @ 2024-08-02 15:23 Zhentiw 阅读(8) 评论(0) 推荐(0) 编辑
摘要:Video: https://www.youtube.com/watch?v=PkFuytYVqI8&list=WL&index=67 body └─ article.feature ├─ section.article-hero │ ├─ h2 │ └─ img │ ├─ section.arti 阅读全文
posted @ 2024-07-01 19:10 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要:Video: https://www.youtube.com/watch?v=zqjKE_zcWzE&list=WL&index=68&t=14s code: https://github.com/Alliemack77/scroll-animations-with-css-only /* Cust 阅读全文
posted @ 2024-07-01 19:04 Zhentiw 阅读(5) 评论(0) 推荐(0) 编辑
摘要:button:focus-visible, input:focus-visible, a:focus-visible { border-color: #1e88e5; box-shadow: 0 0 3px 2px rgba(30, 135,229,0.5); } 阅读全文
posted @ 2024-06-24 18:23 Zhentiw 阅读(10) 评论(0) 推荐(0) 编辑
摘要:.balanced-text h2 { color: yellow; text-wrap: balance; } .unbalanced-text h2 { color: rgb(252, 1, 218); } 阅读全文
posted @ 2024-06-24 18:21 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑
摘要:ul li { border: 2px solid gray; border-radius: 8px; padding: 1rem; margin: 1rem; } // old way ul li input:checked { accent-color: #f806e4; } // new wa 阅读全文
posted @ 2024-06-24 18:19 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑
摘要:The cards on the DJI site have an effect where the hovered card expands and the other cards shrink: In order to emulate this effect we'll use Flexbox. 阅读全文
posted @ 2024-06-04 15:11 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑

1 2 3 4 5 ··· 11 下一页
点击右上角即可分享
微信分享提示