{"id":24652281,"url":"https://github.com/laclys/css-practice-2023","last_synced_at":"2025-03-20T22:34:03.170Z","repository":{"id":192263791,"uuid":"686387422","full_name":"laclys/css-practice-2023","owner":"laclys","description":"css practice \u003e.\u003c（Total 114 ✅）","archived":false,"fork":false,"pushed_at":"2023-09-22T17:02:54.000Z","size":1939,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T19:14:20.868Z","etag":null,"topics":["css","css-animations","css-arts"],"latest_commit_sha":null,"homepage":"https://laclys.github.io/css-practice-2023/Person\u0026Earth.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laclys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-02T16:11:14.000Z","updated_at":"2023-09-22T17:13:11.000Z","dependencies_parsed_at":"2023-09-22T23:37:09.923Z","dependency_job_id":null,"html_url":"https://github.com/laclys/css-practice-2023","commit_stats":null,"previous_names":["laclys/css-practice-2023"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laclys%2Fcss-practice-2023","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laclys%2Fcss-practice-2023/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laclys%2Fcss-practice-2023/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laclys%2Fcss-practice-2023/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laclys","download_url":"https://codeload.github.com/laclys/css-practice-2023/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244705380,"owners_count":20496489,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-animations","css-arts"],"created_at":"2025-01-25T19:14:28.223Z","updated_at":"2025-03-20T22:34:03.152Z","avatar_url":"https://github.com/laclys.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n  CSS Demo\n  \n\n  \n\n* [BlurWordAnimation](https://laclys.github.io/css-practice-2023/BlurWordAnimation.html)\n* [BubbleRises](https://laclys.github.io/css-practice-2023/BubbleRises.html)\n* [CSS@property实现背景色渐变](https://laclys.github.io/css-practice-2023/CSS@property实现背景色渐变.html)\n* [CSSCustomProperties_demo01](https://laclys.github.io/css-practice-2023/CSSCustomProperties/CSSCustomProperties_demo01.html)\n* [propertyCss_demo01](https://laclys.github.io/css-practice-2023/CSSCustomProperties/propertyCss_demo01.html)\n* [propertyCss_demo02(Underlines_hover_transition(Houdini))](https://laclys.github.io/css-practice-2023/CSSCustomProperties/propertyCss_demo02(Underlines_hover_transition(Houdini)).html)\n* [propertyCss_demo03(Loading)](https://laclys.github.io/css-practice-2023/CSSCustomProperties/propertyCss_demo03(Loading).html)\n* [CSS变量实现动画函数复用](https://laclys.github.io/css-practice-2023/CSS变量实现动画函数复用.html)\n* [Calc\u0026CSSVariableDemo](https://laclys.github.io/css-practice-2023/Calc\u0026CSSVariableDemo.html)\n* [Css3Filter](https://laclys.github.io/css-practice-2023/Css3Filter.html)\n* [GrayWebsiteByMix-blend-mode](https://laclys.github.io/css-practice-2023/GrayWebsiteByMix-blend-mode.html)\n* [GrayWebsiteBybackdrop-filter](https://laclys.github.io/css-practice-2023/GrayWebsiteBybackdrop-filter.html)\n* [IE-LOGO](https://laclys.github.io/css-practice-2023/IE-LOGO.html)\n* [InsetShadowButton](https://laclys.github.io/css-practice-2023/InsetShadowButton.html)\n* [LinearGradientMask(从左到右实现一个从实色到透明的遮罩)](https://laclys.github.io/css-practice-2023/LinearGradientMask(从左到右实现一个从实色到透明的遮罩).html)\n* [MisakaMikoto-UseBoxShadow](https://laclys.github.io/css-practice-2023/MisakaMikoto-UseBoxShadow.html)\n* [NeonBorderAnimation](https://laclys.github.io/css-practice-2023/NeonBorderAnimation.html)\n* [NeonText](https://laclys.github.io/css-practice-2023/NeonText.html)\n* [Person\u0026Earth](https://laclys.github.io/css-practice-2023/Person\u0026Earth.html)\n* [PureCSSWave(卡卷波浪)](https://laclys.github.io/css-practice-2023/PureCSSWave(卡卷波浪).html)\n* [Repeating-linear-gradientBackground](https://laclys.github.io/css-practice-2023/Repeating-linear-gradientBackground.html)\n* [SVGTextLineEffect](https://laclys.github.io/css-practice-2023/SVGTextLineEffect.html)\n* [SVG_stroke-dasharray](https://laclys.github.io/css-practice-2023/SVG_stroke-dasharray.html)\n* [SVG_stroke-dashoffset](https://laclys.github.io/css-practice-2023/SVG_stroke-dashoffset.html)\n* [SVGfeturbulence作用于文字](https://laclys.github.io/css-practice-2023/SVGfeturbulence作用于文字.html)\n* [VariousButtonShapes](https://laclys.github.io/css-practice-2023/VariousButtonShapes.html)\n* [animation-composition_Demo](https://laclys.github.io/css-practice-2023/animation-composition_Demo.html)\n* [background-attachment滚动阴影](https://laclys.github.io/css-practice-2023/background-attachment滚动阴影.html)\n* [background-blend-mode](https://laclys.github.io/css-practice-2023/background-blend-mode.html)\n* [background-blend-mode:Icon换色](https://laclys.github.io/css-practice-2023/background-blend-mode:Icon换色.html)\n* [background-blend-modeLighten(咒印形态)](https://laclys.github.io/css-practice-2023/background-blend-modeLighten(咒印形态).html)\n* [background-clip](https://laclys.github.io/css-practice-2023/background-clip.html)\n* [background-万花筒(多重角向渐变)](https://laclys.github.io/css-practice-2023/background-万花筒(多重角向渐变).html)\n* [background-万花筒2](https://laclys.github.io/css-practice-2023/background-万花筒2.html)\n* [backgroundUnderlineAnimation](https://laclys.github.io/css-practice-2023/backgroundUnderlineAnimation.html)\n* [background渐变三角形](https://laclys.github.io/css-practice-2023/background渐变三角形.html)\n* [background渐变背景动画](https://laclys.github.io/css-practice-2023/background渐变背景动画.html)\n* [blur与contrast添加圆角](https://laclys.github.io/css-practice-2023/blur与contrast添加圆角.html)\n* [border-image-clip-path](https://laclys.github.io/css-practice-2023/border-image-clip-path.html)\n* [box-shadow画云☁️](https://laclys.github.io/css-practice-2023/box-shadow画云☁️.html)\n* [clip-path-circle](https://laclys.github.io/css-practice-2023/clip-path-circle.html)\n* [clip-pathBasic](https://laclys.github.io/css-practice-2023/clip-pathBasic.html)\n* [clip-pathBorder动画](https://laclys.github.io/css-practice-2023/clip-pathBorder动画.html)\n* [clip-path动画](https://laclys.github.io/css-practice-2023/clip-path动画.html)\n* [clip-path动画2](https://laclys.github.io/css-practice-2023/clip-path动画2.html)\n* [clip-path实现任意空间overflowHidden](https://laclys.github.io/css-practice-2023/clip-path实现任意空间overflowHidden.html)\n* [clip-path文字断裂动画](https://laclys.github.io/css-practice-2023/clip-path文字断裂动画.html)\n* [conic-gradient扇形切换动画(mask)](https://laclys.github.io/css-practice-2023/conic-gradient扇形切换动画(mask).html)\n* [conic-gradient金字塔](https://laclys.github.io/css-practice-2023/conic-gradient金字塔.html)\n* [content:attr](https://laclys.github.io/css-practice-2023/content:attr.html)\n* [css优惠券波浪](https://laclys.github.io/css-practice-2023/css优惠券波浪.html)\n* [drop-shadow](https://laclys.github.io/css-practice-2023/drop-shadow.html)\n* [filterMixBetweenBlurAndContrast两小球相交融合](https://laclys.github.io/css-practice-2023/filterMixBetweenBlurAndContrast两小球相交融合.html)\n* [filter与backdrop-filter](https://laclys.github.io/css-practice-2023/filter与backdrop-filter.html)\n* [filter与backdrop-filter2](https://laclys.github.io/css-practice-2023/filter与backdrop-filter2.html)\n* [gradientBorderAnimation](https://laclys.github.io/css-practice-2023/gradientBorderAnimation.html)\n* [gradientBorderAnimation2](https://laclys.github.io/css-practice-2023/gradientBorderAnimation2.html)\n* [gradientBorderAnimation3(使用clip-path)](https://laclys.github.io/css-practice-2023/gradientBorderAnimation3(使用clip-path).html)\n* [hue-rotate](https://laclys.github.io/css-practice-2023/hue-rotate.html)\n* [hue-rotate实现背景渐变](https://laclys.github.io/css-practice-2023/hue-rotate实现背景渐变.html)\n* [img加载错误(伪元素处理)](https://laclys.github.io/css-practice-2023/img加载错误(伪元素处理).html)\n* [multi_column_Layout_Demo](https://laclys.github.io/css-practice-2023/layout/multi_column_Layout_Demo.html)\n* [nav_list_by_margin_left_auto](https://laclys.github.io/css-practice-2023/layout/nav_list_by_margin_left_auto.html)\n* [使用margin:auto水平垂直居中元素](https://laclys.github.io/css-practice-2023/layout/使用margin:auto水平垂直居中元素.html)\n* [loading···](https://laclys.github.io/css-practice-2023/loading···.html)\n* [mask](https://laclys.github.io/css-practice-2023/mask.html)\n* [mask两张图片融合](https://laclys.github.io/css-practice-2023/mask两张图片融合.html)\n* [mask切换图片](https://laclys.github.io/css-practice-2023/mask切换图片.html)\n* [mask实现图片切角遮罩](https://laclys.github.io/css-practice-2023/mask实现图片切角遮罩.html)\n* [max函数min函数clamp函数限制字体大小](https://laclys.github.io/css-practice-2023/max函数min函数clamp函数限制字体大小.html)\n* [mix-blend-mode](https://laclys.github.io/css-practice-2023/mix-blend-mode.html)\n* [mix-blend-modeScreen(三球合一可用于loading)](https://laclys.github.io/css-practice-2023/mix-blend-modeScreen(三球合一可用于loading).html)\n* [overflow\u0026transform实现边框hover](https://laclys.github.io/css-practice-2023/overflow\u0026transform实现边框hover.html)\n* [radial-gradient](https://laclys.github.io/css-practice-2023/radial-gradient.html)\n* [shadowBasic](https://laclys.github.io/css-practice-2023/shadowBasic.html)\n* [shadow单侧阴影](https://laclys.github.io/css-practice-2023/shadow单侧阴影.html)\n* [text-shadow](https://laclys.github.io/css-practice-2023/text-shadow.html)\n* [tiktokLOGO](https://laclys.github.io/css-practice-2023/tiktokLOGO.html)\n* [transform-origin_demo](https://laclys.github.io/css-practice-2023/transform-origin_demo.html)\n* [transform模拟渐变动画](https://laclys.github.io/css-practice-2023/transform模拟渐变动画.html)\n* [transition-delay实现按钮border动画效果](https://laclys.github.io/css-practice-2023/transition-delay实现按钮border动画效果.html)\n* [transition-delay实现按钮border动画效果circle](https://laclys.github.io/css-practice-2023/transition-delay实现按钮border动画效果circle.html)\n* [transitionHover](https://laclys.github.io/css-practice-2023/transitionHover.html)\n* [❤️](https://laclys.github.io/css-practice-2023/❤️.html)\n* [个六边形图形](https://laclys.github.io/css-practice-2023/个六边形图形.html)\n* [伪元素实现梯形按钮](https://laclys.github.io/css-practice-2023/伪元素实现梯形按钮.html)\n* [利用阴影复制自身图形](https://laclys.github.io/css-practice-2023/利用阴影复制自身图形.html)\n* [刮刮乐ByTransition-delay](https://laclys.github.io/css-practice-2023/刮刮乐ByTransition-delay.html)\n* [响应式屏幕宽度使用min函数](https://laclys.github.io/css-practice-2023/响应式屏幕宽度使用min函数.html)\n* [基于transition-delay的边框长度变化动画(圆)](https://laclys.github.io/css-practice-2023/基于transition-delay的边框长度变化动画(圆).html)\n* [基于transition-delay的边框长度变化动画](https://laclys.github.io/css-practice-2023/基于transition-delay的边框长度变化动画.html)\n* [基于混合模式的故障艺术风格](https://laclys.github.io/css-practice-2023/基于混合模式的故障艺术风格.html)\n* [多行文本的渐隐消失](https://laclys.github.io/css-practice-2023/多行文本的渐隐消失.html)\n* [属性选择器配合伪元素实现类title功能](https://laclys.github.io/css-practice-2023/属性选择器配合伪元素实现类title功能.html)\n* [新拟态风格阴影EmbossedShadow](https://laclys.github.io/css-practice-2023/新拟态风格阴影EmbossedShadow.html)\n* [模糊实现彩色阴影filterBlur](https://laclys.github.io/css-practice-2023/模糊实现彩色阴影filterBlur.html)\n* [浮雕阴影](https://laclys.github.io/css-practice-2023/浮雕阴影.html)\n* [渐变叠加多层](https://laclys.github.io/css-practice-2023/渐变叠加多层.html)\n* [渐变实现波浪](https://laclys.github.io/css-practice-2023/渐变实现波浪.html)\n* [渐变色文字效果background-clip:text](https://laclys.github.io/css-practice-2023/渐变色文字效果background-clip:text.html)\n* [渐变阴影\u0026彩色阴影](https://laclys.github.io/css-practice-2023/渐变阴影\u0026彩色阴影.html)\n* [立体阴影](https://laclys.github.io/css-practice-2023/立体阴影.html)\n* [给clip-path图形添加边框](https://laclys.github.io/css-practice-2023/给clip-path图形添加边框.html)\n* [虚线边框动画(dashedBorderAnimation)](https://laclys.github.io/css-practice-2023/虚线边框动画(dashedBorderAnimation).html)\n* [虚线边框动画(dashedBorderAnimation)2](https://laclys.github.io/css-practice-2023/虚线边框动画(dashedBorderAnimation)2.html)\n* [规则图形的SVG路径线条动画](https://laclys.github.io/css-practice-2023/规则图形的SVG路径线条动画.html)\n* [规则图形的SVG路径线条动画2](https://laclys.github.io/css-practice-2023/规则图形的SVG路径线条动画2.html)\n* [规则图形的SVG路径线条动画3(六边形)](https://laclys.github.io/css-practice-2023/规则图形的SVG路径线条动画3(六边形).html)\n* [规则图形的SVG路径线条动画4(loading)](https://laclys.github.io/css-practice-2023/规则图形的SVG路径线条动画4(loading).html)\n* [边框嵌文字](https://laclys.github.io/css-practice-2023/边框嵌文字.html)\n* [边框长度变化动画(widthBorderAnimation)](https://laclys.github.io/css-practice-2023/边框长度变化动画(widthBorderAnimation).html)\n* [遮罩模拟boxShadow](https://laclys.github.io/css-practice-2023/遮罩模拟boxShadow.html)\n* [长投影](https://laclys.github.io/css-practice-2023/长投影.html)\n* [阴影模拟多层边框](https://laclys.github.io/css-practice-2023/阴影模拟多层边框.html)\n  \n\n  \n\n  Total 114  ✅\n  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaclys%2Fcss-practice-2023","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaclys%2Fcss-practice-2023","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaclys%2Fcss-practice-2023/lists"}