ホームページ > 記事 > ウェブフロントエンド > CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。
CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。
- 青灯夜游転載
- 2021-09-10 10:42:042629ブラウズ
CSSフィルターを上手に使うとWebサイトがよりカッコよくなります。この記事では、CSS フィルターの使用に関するヒントをいくつか紹介します。お役に立てれば幸いです。
この記事の内容を始めましょう。
画像を処理するときによく使用する機能の 1 つは、画像にさまざまな視覚効果を与えることができるフィルターです。
CSS には、CSS コードを使用して、ぼかし、グレースケール、明度、カラー シフトなどの要素のさまざまなフィルター効果を指定できるフィルター属性もあります。 . 移動して待ちます。
CSS フィルターの基本的な使用法は非常に簡単です。CSS 標準には、事前定義された効果 (以下のぼかし、明るさ、コントラストなど) を実現するいくつかの関数が含まれています。値を指定することで、必要なものを実現できます。効果:
/* 使用单个滤镜 （如果传入的参数是百分数，那么也可以传入对应的小数：40% --> 0.4）*/ filter: blur(5px); filter: brightness(40%); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* 使用多个滤镜 */ filter: contrast(175%) brightness(3%); /* 不使用任何滤镜 */ filter: none;
公式デモ: MDN
不規則な形状に影を追加します。blur を使用して、背景のぼかし、すりガラス効果などを実現します。 以下では、
をさらに使用して、Web サイトのインタラクションをよりクールにするアニメーション効果を実現し、同時に CSS フィルター についての理解を深めます。始めましょう！ (以下で使用するアニメーションと疑似クラスの知識は、
で詳しく紹介されているため、ここでは繰り返しません。必要な友達はそこに行くことができます。 )
Movie Effectbrightness
フィルターの画像の明るさを調整するために使用されます。デフォルト値は 1 です。1 未満の場合は画像が暗くなり、#0 の場合は完全に黒い画像が表示されます。が 1 より大きい場合、画像は元の画像よりも明るく表示されます。 背景画像
テキスト の透明度を調整することで、映画のエンディングの効果をシミュレートできます。
<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到快乐，那就去做吧</p>
<br>
<p>不要管别人说什么</p>
</div>
</div>.pic{
height: 100%;
width: 100%;
position: absolute;
background: url('./images/movie.webp') no-repeat;
background-size: cover;
animation: fade-away 2.5s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
.text{
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0;
animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
@keyframes fade-away { //背景图的明暗度动画
30%{
filter: brightness(1);
}
100%{
filter: brightness(0);
}
}
@keyframes show{ //文字的透明度动画
20%{
opacity: 0;
}
100%{
opacity: 1;
}
}
以下の単語カードでは、マウス hover
が特定の時間に達したときカードがオンになっていると、他のカードの背景がぼやけ、ユーザーは現在のカードに集中できるようになります。
<ul class="cards">
<li class="card">
<p class="title">Flower</p>
<p class="content">The flowers mingle to form a blaze of color.</p>
</li>
<li class="card">
<p class="title">Sunset</p>
<p class="content">The sunset glow tinted the sky red.</p>
</li>
<li class="card">
<p class="title">Plain</p>
<p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
</li>
</ul> は、.card 要素に背景を追加することで実装されます。擬似クラスでは、要素がフォーカスされていない場合、要素の擬似クラスにフィルターが追加されます。 .card:before{
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
}
/*
这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*///通过css选择器选出非hover的.card元素，给其伪类添加模糊、透明度和明暗度的滤镜
.cards:hover > .card:not(:hover):before{
filter: blur(5px) opacity(0.8) brightness(0.8);
}//对于hover的元素，其伪类增强饱和度，尺寸放大
.card:hover:before{
filter: saturate(1.2);
transform: scale(1.05);
}フェード効果により、ノスタルジックなスタイルを作成できます。次の一連のフォト ウォールでは、セピア
フィルターを使用して画像のトーンをダークブラウンに変換し、彩度saturate と色相回転 ## を下げることで微調整しています。 #hue-rotate 、古い写真の効果をシミュレートします。
.pic{
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 1s;
}
.pic:hover{
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}
グレースケール効果
Web サイトをグレーにするにはどうすればよいですか? filter: greyscale(100%) を html 要素に追加するだけです。
grayscale(amount)関数は入力画像のグレースケールを変更します。
の値は、グレースケール変換の比率を定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。値が設定されていない場合、デフォルト値は 0 です。
フュージョン エフェクト
交差する 2 つの要素が次のフュージョン エフェクトを生成するには、フィルタを使用する必要があります。それは です。ブラーと
コントラスト。
<div class="container"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div>
.container{
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff; //给融合元素的父元素设置背景色
display: flex;
align-items: center;
justify-content: center;
filter: contrast(30); //给融合元素的父元素设置contrast
}
.circle{
border-radius: 50%;
position: absolute;
filter: blur(10px); //给融合元素设置blur
}
.circle-1{
height: 90px;
width: 90px;
background: #03a9f4;
transform: translate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.circle-2{
height: 60px;
width: 60px;
background: #0000ff;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving { //两个元素的移动
0%{
transform: translate(50px)
}
100%{
transform: translate(-50px)
}
}
フュージョン効果を実現するための技術的なポイント:
コントラスト
- フィルターfusion 要素の親要素 (
- .container
) に適用され、親要素は
blurbackgroundを設定する必要があります。 フィルターはブレンド要素 ( - .circle
) に適用されます。
blur 画像のぼかしレベルを設定します。
画像のコントラストを設定します。上記のように 2 つを組み合わせると、魔法のような融合効果が生まれ、この文章を数式のように使用できます。 この融合効果に基づいて、いくつかの興味深いインタラクション デザインを行うことができます。 <ul><li>加载动画：</li></ul>
<p><img src="https://img.php.cn/upload/image/694/319/715/163124112387346CSS%20%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%20Web%20%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E3%82%88%E3%82%8A%E3%82%AF%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%92%E3%83%B3%E3%83%88%E3%81%AF%E3%80%81%E5%8F%8E%E9%9B%86%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82" title="163124112387346CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。" alt="CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。"></p>
<p><code>html和css如下所示，这个动画主要通过控制子元素.circle的尺寸和位移来实现，但是由于父元素和子元素都满足 “融合公式” ，所以当子元素相交时，就出现了融合的效果。
<div class="container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>
.container {
margin: 10px auto;
height: 140px;
width: 300px;
background: #fff; //父元素设置背景色
display: flex;
align-items: center;
filter: contrast(30); //父元素设置contrast
}
.circle {
height: 50px;
width: 60px;
background: #1aa7ff;
border-radius: 50%;
position: absolute;
filter: blur(20px); //子元素设置blur
transform: scale(0.1);
transform-origin: left top;
}
.circle{
animation: move 4s cubic-bezier(.44,.79,.83,.96) infinite;
}
.circle:nth-child(2) {
animation-delay: .4s;
}
.circle:nth-child(3) {
animation-delay: .8s;
}
.circle:nth-child(4) {
animation-delay: 1.2s;
}
.circle:nth-child(5) {
animation-delay: 1.6s;
}
@keyframes move{ //子元素的位移和尺寸动画
0%{
transform: translateX(10px) scale(0.3);
}
45%{
transform: translateX(135px) scale(0.8);
}
85%{
transform: translateX(270px) scale(0.1);
}
}- 酷炫的文字出场方式：
主要通过不断改变letter-spacing和blur的值，使文字从融合到分开：
<div class="container"> <span class="text">fantastic</span> </div>
.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text{
font-size: 100px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: -40px;
color: #fff;
animation: move-letter 4s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
@keyframes move-letter{
0% {
opacity: 0;
letter-spacing: -40px;
filter: blur(10px);
}
25% {
opacity: 1;
}
50% {
filter: blur(5px);
}
100% {
letter-spacing: 20px;
filter: blur(2px);
}
}水波效果
filter还可以通过 URL 链接到 SVG 滤镜元素，SVG滤镜元素MDN 。
下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的，原理参考了 说说SVG的feTurbulence滤镜和SVG feTurbulence滤镜深入介绍，有兴趣的朋友可以深入阅读。
feTurbulence滤镜借助Perlin噪声算法模拟自然界真实事物那样的随机样式。它接收下面5个属性：
baseFrequency表示噪声的基本频率参数，频率越高，噪声越密集。numOctaves就表示倍频的数量，倍频的数量越多，噪声看起来越自然。seed属性表示feTurbulence滤镜效果中伪随机数生成的起始值，不同数量的seed不会改变噪声的频率和密度，改变的是噪声的形状和位置。stitchTiles定义了Perlin噪声在边框处的行为表现。type属性值有fractalNoise和turbulence，模拟随机样式使用turbulence。
在这个例子，两个img标签使用同一张图片，将第二个img标签使用scaleY(-1)实现垂直方向的镜像翻转，模拟倒影。
并且，对倒影图片使用feTurbulence滤镜，通过动画不断改变feTurbulence滤镜的baseFrequency值实现水纹波动的效果。
<div class="container">
<img src="images/moon.jpg" alt="CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。" >
<img src="images/moon.jpg" class="reflect" alt="CSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。" >
</div>
<!--定义svg滤镜，这里使用的是feTurbulence滤镜-->
<svg width="0" height="0">
<filter id="displacement-wave-filter">
<!--baseFrequency设置0.01 0.09两个值，代表x轴和y轴的噪声频率-->
<feTurbulence baseFrequency="0.01 0.09">
<!--这是svg动画的定义方式，通过动画不断改变baseFrequency的值，从而形成波动效果-->
<animate attributeName="baseFrequency"
dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>.container{
height: 520px;
width: 400px;
display: flex;
clip-path: inset(10px);
flex-direction: column;
}
img{
height: 50%;
width: 100%;
}
.reflect {
transform: translateY(-2px) scaleY(-1);
//对模拟倒影的元素应用svg filter
//url中对应的是上面svg filter的id
filter: url(#displacement-wave-filter);
}抖动效果
在上面的水波动画中改变的是baseFrequency值，我们也通过改变seed的值，实现文字的抖动效果。
<div>
<p class="shaky">Such a joyful night!</p>
</div>
<svg width="0" height="0">
<filter id="displacement-text-filter">
<!--定义feTurbulence滤镜-->
<feTurbulence baseFrequency="0.02" seed="0">
<!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果-->
<animate attributeName="seed"
dur="1s" keyTimes="0;0.5;1" values="1;2;3"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>.shaky{
font-size: 60px;
filter: url(#displacement-text-filter); //url中对应的是上面svg filter的id
}原文地址：https://juejin.cn/post/7002829486806794276
作者：Alaso
更多编程相关知识，请访问：编程视频！！
以上がCSS フィルターを使用して Web サイトをよりクールにするためのヒントは、収集する価値があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。