css共10篇
不规则形状(缎带形状)-xxlog

不规则形状(缎带形状)

HTML: <div class='ribbon'> <div class='body'>Pure CSS Ribbon</div> <div class='blocks'> <div class='block'></div> <div class='block'></div> <div class='b...
xxlog的头像-xxlogsvipxxlog1年前
07421
写CSS的常用套路(霓虹文本)-xxlog

写CSS的常用套路(霓虹文本)

HTML: <div class='neon'>fushigi no monogatari</div> CSS: @import url(https://fonts.googleapis.com/css?family=Pacifico); body { display: flex; height: 100vh; justify-content: ...
xxlog的头像-xxlogsvipxxlog1年前
04721
写CSS的常用套路(发光文本)-xxlog

写CSS的常用套路(发光文本)

HTML: <h1 class='glowIn'>Hello World</h1> <p class='glowIn'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore m...
xxlog的头像-xxlogsvipxxlog1年前
05512
写CSS的常用套路(兄弟选择符定制表单元素 )-xxlog

写CSS的常用套路(兄弟选择符定制表单元素 )

提示:这里最好将input作为label的子元素,这样用户点击label时就能传到input上默认的input太丑怎么办?那就把它先抹掉,用appearance: none或opacity: 0都可以 然后,利用兄弟选择符~来定制和i...
xxlog的头像-xxlogsvipxxlog1年前
04911
写CSS的常用套路(overflow障眼法)-xxlog

写CSS的常用套路(overflow障眼法)

之前有做过闪光按钮的效果:鼠标悬浮按钮上时一道光从左到右划过去。 笔者就用渐变来模拟那道光,通过transform: translateX()将其平移至右边。 但这样明显不对啊,这光为啥能被看见呢?不应该...
xxlog的头像-xxlogsvipxxlog1年前
0378
写CSS的常用套路(attr()生成文本内容)-xxlog

写CSS的常用套路(attr()生成文本内容)

元素可以有自定义的属性值,它的命名格式通常为data-*attr()用于获取元素的这种自定义属性值,并赋值给其伪元素的content作为其生成的内容利用这个函数,我们可以用伪元素在原先文本的基础上“...
xxlog的头像-xxlogsvipxxlog1年前
05714
写CSS的常用套路(伪元素)-xxlog

写CSS的常用套路(伪元素)

简而言之,伪元素就是在原先的元素基础上插入额外的元素,而且这个元素不充当HTML的标签,这样就能保持HTML结构的整洁。 我们知道每个元素都有::before和::after这两个伪元素,也就是说每个元素...
xxlog的头像-xxlogsvipxxlog1年前
04511
写CSS的常用套路(绝对定位实现多重边框)-xxlog

写CSS的常用套路(绝对定位实现多重边框)

谁规定按钮只能有一套边框的?利用绝对定位和padding,我们可以给按钮做出3套大小不一的边框来,这样效果更炫了。 HTML: <button class='btn btn-primary btn-ghost btn-multiple-border-str...
xxlog的头像-xxlogsvipxxlog1年前
05814