【前端技巧】CSS常用知识碎片（七）
CSS常用知识碎片（七）
object-fit属性
object-fit: fill; /* fill是默认值，表示“填充”，替换内容会拉伸，填满整个content-box的尺寸, 不保证保持原有的比例。 */
object-fit: contain; /* contain表示“包含”，替换内容保持原有尺寸比例，同时替换内容一定可以在content-box中完整显示，至少一个方向的尺寸和content-box保持一致。 */
object-fit: cover; /* cover表示“覆盖”，替换内容同样会保持原始的尺寸比例，同时替换内容会完全覆盖content-box区域，至少一个方向的尺寸和content-box保持一致。 */
object-fit: none; /* none表示替换内容的尺寸显示为原始的尺寸，无视外部的尺寸设置。 */
object-fit: scale-down; /* scale-down的样式表现就好像依次设置了none和contain关键字，然后选取呈现的尺寸较小的那个效果。 */
/* 在实际开发中，通常缩略图使用cover关键字，列表图使用contain关键字，全屏大图预览使用scale-down关键字。 */
object-position属性实现的无损gif动图效果
<body>
<img class="love" src="heart-animation.png">
body>
<style>
.love {
width: 100px; height: 100px;
object-fit: cover;
animation: heart-burst steps(28) .8s infinite both;
}
@keyframes heart-burst {
0% {
object-position: 0%;
}
100% {
object-position: 100%;
}
}
style>
实现图像半透明叠加的cross-fade()函数
<body>
<div class="cross-fade-image">div>
body>
<style>
.cross-fade-image {
width: 300px; height: 300px;
background: no-repeat center / contain;
background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg),
50%);
background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);
}
style>
filter属性
| 滤镜 | 释义 |
|---|---|
filter:blur(5px) |
模糊 |
filter:brightness(2.4) |
亮度 |
filter:contrast(200%) |
对比度 |
filter:drop-shadow(4px 4px 8px blue) |
投影 |
filter:grayscale(50%) |
灰度 |
filter:hue-rotate(90deg) |
色调旋转 |
filter:invert(75%) |
反相 |
filter:opacity(25%) |
透明度 |
filter:saturate(230%) |
饱和度 |
filter:sepia(60%) |
褐色 |
box-shadow属性和drop-shadow()函数
box-shadow只会在border box盒子周围一圈显示阴影，透明的虚线框和中间的镂空部分都看不到阴影效果，而drop-shadow()函数会在每一个虚线框的实线部分下方留下独立的投影效果
.dashed {
width: 100px; height: 100px;
border: 10px dashed deepskyblue;
}
.box-shadow {
box-shadow: 5px 5px 8px;
}
.drop-shadow {
filter: drop-shadow(5px 5px 8px);
}
- 系统文字渐变动画效果
<body>
<h2 class="flow-slogan">CSS新世界h2>
body>
<style>
.flow-slogan {
font-size: 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, red, yellow, lime,
aqua, blue, fuchsia);
animation: hue 6s linear infinite;
}
@keyframes hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(360deg); }
}
style>
- CSS滤镜实现融合粘滞效果
<body>
<div class="container">
<div class="box box-1">div>
<div class="box box-2">div>
div>
body>
<style>
.container {
filter: blur(10px) contrast(5);
}
.box {
width: 100px; height: 100px;
border-radius: 50%;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
.box-1 {
background-color: deepskyblue;
animation: fly-r 5s infinite alternate;
}
.box-2 {
width: 60px; height: 60px;
margin-top: 20px;
background-color: white;
animation: fly-l 5s infinite alternate;
}
@keyframes fly-r {
from { transform: translateX(0); }
to { transform: translateX(120px); }
}
@keyframes fly-l {
from { transform: translateX(120px); }
to { transform: translateX(0); }
}
style>
- SVG滤镜实现融合粘滞效果
<body>
<svg width="0" height="0" style="position:absolute;">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
filter>
defs>
svg>
<input type="checkbox" id="share">
<div class="target">
<label class="share" for="share">分享label>
<span class="icon-share-weibo"><img src="data:image/png;base64,...">span>
<span class="icon-share-wechat"><img src="data:image/png;base64,...">span>
<span class="icon-share-qq"><img src="data:image/png;base64,...">span>
div>
body>
<style>
.target {
height: 120px; max-width: 200px;
filter: url("#goo");
text-align: center;
margin: auto;
position: relative;
}
.share {
display: block;
width: 64px; line-height: 64px;
background-color: #cd0000;
color: #fff;
border-radius: 50%;
margin: auto;
position: relative;
z-index: 1;
}
[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
}
[class*="icon-share-"] {
position: absolute;
width: 48px; height: 48px;
background-color: #cd0000;
border-radius: 50%;
transition: transform .5s;
top: 8px; left: 0; right: 0;
margin: auto;
-ms-transform: scale(0.5);
transform: scale(0.5);
}
[class*="icon-share-"] > img {
display: block;
width: 20px;
height: 20px;
margin: 14px auto;
}
:checked + .target .icon-share-weibo {
-ms-transform: scale(1) translate(-70px, 60px);
transform: scale(1) translate(-70px, 60px);
}
:checked + .target .icon-share-wechat {
-ms-transform: scale(1) translate(0, 75px);
transform: scale(1) translate(0, 75px);
}
:checked + .target .icon-share-qq {
-ms-transform: scale(1) translate(70px, 60px);
transform: scale(1) translate(70px, 60px);
}
:checked + .target .share {
animation: jello 1s;
}
@keyframes jello {
from, 11.1%, to {
transform: none;
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
style>
- 水波荡漾效果
<body>
<svg style="position:absolute;height:0;clip:rect(0 0 0 0);">
<defs>
<filter id="filterRipple">
<feImage xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,..." x="-95" y="-167" width="512" height="512" result="ripple">feImage>
<feDisplacementMap xChannelSelector="G" yChannelSelector="R" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="0">feDisplacementMap>
<feComposite operator="in" in2="ripple">feComposite>
<feComposite in2="SourceGraphic">feComposite>
filter>
defs>
svg>
<button id="button" type="button" class="ui-button ui-button-primary">点击我button>
<p><img id="img" src="1.jpg">p>
body>
<style>
button, img {
filter: url(#filterRipple);
}
style>
- 弹窗毛玻璃效果（主流的弹框均使用半透明的黑色遮罩层，其实我们可以多设置一行CSS代码，让视觉效果更好）
dialog {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
- 下拉框毛玻璃效果
.droplist {
background: hsla(0, 0%, 100%, .75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}