杰人编程网

杰人编程网

border-radius属性

暗夜发光,独自闪耀,网页暗黑模式下的特效和动效,CSS3实现

jieren365 0 8 次浏览 文章教程

众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。霓虹灯效应是一种视觉效果，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓虹灯效应的作用在于吸引人们的注意力和增强品牌形象的辨识度，因为 …

CSS基本属性(三)

jieren365 0 9 次浏览 文章教程

Transition—复合属性[检索或设置对象变换时的过渡。]<’ transition-property '>： 检索或设置对象中的参与过渡的属性none： 不指定过渡的css属性all： 所有可以进行过渡的css属性自定义属性：指定要进行过渡的css属性<’ transition-duration '>： 检索或设 …

Less 转义

jieren365 0 10 次浏览 文章教程

本节我们学习 Less 语言中的转义（Escaping），什么是转义呢？某些时候，当需要引入无效的 CSS 语法或 Less 不能识别的字符，就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号，并将需要转义的字符串放在 "" 或 '' 中，例如 ~"xkd"。转义允许你使用任意字符串作 …

初学前端 line-height 属性小案例解析

jieren365 0 26 次浏览 文章教程

以下是对这段 HTML5 文件代码的讲解文章：HTML5 文件结构分析这段代码创建了一个动态文本容器，用户可以通过调整控件来更改文本的字体、大小和行高。代码结合了 HTML、CSS 和 JavaScript，提供了良好的用户交互体验。以下是对代码的详细解析：1. 文档声明与基本设置<!DOCTYPE HTML><html id="h …

CSS3+JS实现静态圆形进度条

jieren365 0 9 次浏览 文章教程

在写这篇文章之前，笔者查看了多篇博客，无奈前辈大多只是贴了代码，没有清晰明了的注释，所以容易让新人看得云里雾里。这里，笔者在弄明白原理后，对代码进行了优化，决定写（总结）一篇清晰、明了的圆形进度条的实现，以便后人能快速搞懂。一、实现原理首先，我们来一个圆（黑色）。接着，再来两个半圆，将黑色的圆遮住。（为了演示，左右两侧颜色不一样）这时候，我们顺时针旋转右侧蓝 …

前端还在切图?学完这些css，再也不用切图了

jieren365 0 11 次浏览 文章教程

标题开个玩笑，实际上CSS3有许多亮眼的特性，比如阴影shadow、动画animation、形变transform、渐变gradient、滤镜filter等，合理运用这些特性，可以实现许多高大上的效果。如果觉得有用请点个赞或者收藏。三角形利用border-color支持transparent这一特性，隐藏三条边框，实现三角形。 <style& …

CSS3新增属性(背景图、边框背景、圆角)

jieren365 0 30 次浏览 文章教程

1、Background-size 背景尺寸说明：background-size 规定背景图像的尺寸 属性值length (10px) 规定背景图的大小。第一个值宽度，第二个值高度。（直接定义背景图的大小） Percentage(%) 以百分比为值设置背景图大小（参照元素的大小） cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 contai …