이 기사에서는 프런트엔드 개발을 더 쉽게 만드는 10가지 유용한 CSS 유용한 팁을 공유하겠습니다. 모두에게 도움이 되기를 바랍니다.
CSS
에는 약 200개의 속성이 있습니다. 많은 속성이 서로 연관되어 있으므로 모든 속성의 세부정보를 정리하는 것은 불가능합니다. 따라서 이 글에서는 개발자와 디자이너가 참고할 수 있는 유용한 CSS
팁을 공유합니다. [추천 학습: CSS
大约有两百个属性。很多属性都是相互关联的,理清楚每一个属性细节是不可能的。所以,本文分享一些有用的 CSS
小技巧,方便开发者和设计师参考。【推荐学习:css视频教程】
1、 打字效果
网页设计变得越来越有创意。在 CSS
动画的协调下,你的网页会像活的一样。在这个例子中,我们将使用 animation
和 @keyframes
属性去实现打字效果。
具体来说,在这个演示中,我们通过 steps()
属性来实现分割文本的效果。首先,你必须指定 step()
中传入的数量,在这个例子中就是文本的长度。
接着,第二步,我们使用 @keyframes
去声明什么时候开始执行动画。
如果你在文本
Typing effect for text
后面添加内容,而不改变step()
中的数字,将不会产生这种效果。
这种效果并不是特别新鲜。然而,很多开发者却使用 JavaScript
库去实现,而不是使用 CSS
。
2、透明图片阴影效果
你是否使用过 box-shadow
为透明的图片添加阴影,却让其看起来像添加了一个边框一样?然而解决方案是使用 drop-shadow
。
drop-shadow
的工作方式是,其遵循给给定图片的 Alpha
通道。因此阴影是基于图片的内部形状,而不是显示在图片外面。
3、自定义 Cursor
你不需要强迫你站点访问者使用独特的光标。至少,不是出于用户体验的目的。不过,关于 cursor
属性要说明的是,它可以让你展示图片,这相当于以照片的格式显示提示信息。
一些用户案例,包括比较两个不同的照片,你无需在视图窗口渲染这些照片。比如:cursor
属性可以用在你的设计中,节省空间。因为你可以在特定的 div
元素中锁定特定的光标,所以在此 div
这外可以无效。
目前尝试对图片的大小有限制,读者可以自行更改验证
4、使用 attr() 展示 tooltip
attr()
属性是我最近发现的,且是最得意的发现。我本打算为我的站点添加 tooltip
的功能,但是发现需要引入一个插件,这就引入了不必要的东西,让我的站点看起来臃肿。感谢的是,可以使用 attr()
来避免这种情况。
attr()
css 동영상 튜토리얼
CSS
애니메이션과 조화를 이루면 웹페이지가 살아있는 것처럼 보입니다. 이 예에서는 animation
및 @keyframes
속성을 사용하여 타이핑 효과를 얻습니다. 🎜🎜구체적으로 이 데모에서는 텍스트 분할 효과를 얻기 위해 steps()
속성을 사용합니다. 먼저 step()
에 전달된 양(이 경우 텍스트 길이)을 지정해야 합니다. 🎜🎜그런 다음 두 번째 단계에서는 @keyframes
를 사용하여 애니메이션 실행 시작 시기를 선언합니다. 🎜🎜🎜이 효과는 특별히 새로운 것은 아닙니다. 그러나 많은 개발자는step()
에서 숫자를 변경하지 않고텍스트에 대한 입력 효과
텍스트 뒤에 내용을 추가하면 이 효과가 발생하지 않습니다. 🎜
CSS
를 사용하는 대신 JavaScript
라이브러리를 사용하여 이를 구현합니다. 🎜🎜위 내용은 바라보다! 10가지 좋은 CSS 실용적인 팁(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!