css效果

孤峰孤峰家 2024-01-09 178人阅读

发光字

html：

<div>发光字</div>

css：

div { height: 600px; line-height: 600px; background-color: black; font-size: 120px; color: white; text-align: center; text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red; //设置发光效果}

图片倒影

html：

<div class="box"> <img src="https://img0.baidu.com/it/u=808805078,2411211243&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500"></div>

css：

img { width: 200px; -webkit-box-reflect: below 5px -webkit-linear-gra**nt(transparent 40%, rgba(0, 0, 0, .5)); box-reflect: below 5px linear-gra**nt(transparent 40%, rgba(0, 0, 0, .5));}

文字跳动loading

html：

<div class="wavy"> <span style="--i:1">内</span> <span style="--i:2">容</span> <span style="--i:3">加</span> <span style="--i:4">载</span> <span style="--i:5">中</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span></div>

css：

body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #000;} 
.wavy{ position: relative; -webkit-box-reflect: below -12px linear-gra**nt(transparent, rgba(0, 0, 0, 0.2))} 
.wavy span{ position: relative; display: inline-block; color: #fff; font-size: 2em; ani**tion: ani**te 1s ease-in-out infinite; ani**tion-delay: calc(.1s*var(--i)) } 
@keyframes ani**te{ 0%{ transform: translateY(0px) } 20%{ transform: translateY(-24px) } 40%, 百%{ transform: translateY(0px) } }

css水滴：

html：

<div class="water"> 
</div>

css：

body { width: 100vw; height: 100vh; display: flex; justify-content: center; background-color: #00aa7f;} 
.water { width: 300px; **rgin-top: 200px; height: 300px; border-radius: 42% 58% 77% 23% / 40% 31% 69% 60%; box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 20px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8); ani**tion: move 4s linear infinite alternate;} 
.water::after { content: ''; width: 20px; height: 20px; position: absolute; top: 240px; left: 48%; background-color: rgba(255, 255, 255, 0.8); border-radius: 51% 49% 35% 65% / 40% 54% 46% 60%; ani**tion: move 5s linear infinite alternate;} 
.water::before { content: ''; width: 10px; height: 10px; position: absolute; top: 265px; left: 47%; background-color: rgba(255, 255, 255, 0.8); border-radius: 51% 49% 35% 65% / 59% 54% 46% 41%;} 
@keyframes move { 25% { border-right: 32% 68% 34% 66% / 44% 18% 82% 56%; } 50% { border-radius: 38% 62% 21% 79% / 56% 59% 41% 44%; } 百% { border-radius: 42% 58% 66% 34% / 38% 82% 18% 62%; } }

让网页变黑白：

只需要给html元素添加一个样式即可：

html{ filter: grayscale(1);}

发光按钮：

html：

<div id="btns"> <button class="btn one">按钮</button></div>

css:

#btns { display: flex; align-items: center; justify-content: space-around; height: 100vh; background: #031628; } 
.btn { border: 1px solid; background-color: transparent; text-transform: uppercase; font-size: 14px; padding: 10px 20px; font-weight: 300; cursor: pointer;} 
.one { color: #4cc9f0;}.btn:hover { color: white; border: 0;} 
.one:hover { background-color: #4cc9f0; -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1); -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1); box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);}

边框按钮：

html：

<div id="draw-border"> <button>Hover me</button></div>

css:

#draw-border { display: flex; align-items: center; justify-content: center; height: 100vh;} 
button { border: 0; background: none; text-transform: uppercase; color: #4361ee; font-weight: bold; position: relative; outline: none; padding: 10px 20px; box-sizing: border-box;} 
button::before, button::after { box-sizing: inherit; position: absolute; content: ''; border: 2px solid transparent; width: 0; height: 0;} 
button::after { bottom: 0; right: 0;} 
button::before { top: 0; left: 0;} 
button:hover::before, button:hover::after { width: 百%; height: 百%;} 
button:hover::before { border-top-color: #4361ee; border-right-color: #4361ee; transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;} 
button:hover::after { border-bottom-color: #4361ee; border-left-color: #4361ee; transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;}

流光按钮：绚丽的流光按钮?