文章收藏共47篇
随心记录,经典文章收藏分享!
css 流光按钮-xxlog

css 流光按钮

先看效果图: 实现简单炫酷,直接复制查看效果 CSS: <style> .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 90px; line-heigh...
xxlog的头像-xxlogsvipxxlog1年前
09924
一些有意思的阴影特效,建议收藏!-xxlog

一些有意思的阴影特效,建议收藏!

 彩色边框效果 css: div.one div { width: 100px; height: 100px; margin: 50px auto; background-color: rgb(245, 234, 234); box-shadow: 10px 0 15px -2px rgb(11, 11, 235), 0 -10px 15px ...
xxlog的头像-xxlogsvipxxlog1年前
07715
不规则形状(缎带形状)-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年前
07321
写CSS的常用套路(background-clip:text)-xxlog

写CSS的常用套路(background-clip:text)

能将背景裁剪成文字的前景色,常用来和color: transparent配合生成渐变文本 HTML: <ul> <li><a href='#'>home</a></li> <li><a href='#'>archives</a></li> <li>...
xxlog的头像-xxlogsvipxxlog1年前
03615
写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的常用套路(内发光)

注意到box-shadow还有个inset,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形 再加点动画和滤镜效果,“猩红之月”闪亮登场! HTML: <div class='lo...
xxlog的头像-xxlogsvipxxlog1年前
04717
写CSS的常用套路(遮罩)-xxlog

写CSS的常用套路(遮罩)

如果给box-shadow的扩张半径设定足够大的值,可以用它来遮住背景,而无需额外的div元素 HTML: <input type='checkbox' id='burger-toggle'> <label for='burger-toggle' class='burger-me...
xxlog的头像-xxlogsvipxxlog1年前
06119