CSS3动漫之流彩文本实际效果+照片模糊不清实际效

2021-03-18 02:22 jianzhan

序言

最先第1步,先合理布局html编码以下:

<div class="wrap">
    <img src="images/1.jpg" class="blur"/>
    <div class="text-gradient ">天赐神功</div>
    <div class="border"></div>
</div>

上面1看第1个照片img 便是完成照片模糊不清实际效果的DOM元素,text-gradient完成的是流彩文本实际效果的DOM元素,border完成的是边框屈伸实际效果的DOM元素

想想款式该咋写呢,依据这个合理布局,大家先来完成照片模糊不清实际效果。

照片模糊不清实际效果

先写下wrap的款式:

.wrap{
    position: relative;
    width:300px;
    height:225px;
    text-align: center;
}

.blur的款式以下:

.wrap .blur{
    position: absolute;
    top:0;
    left:0;
    width:300px;
    height:225px;
    z-index:1;
}
.wrap:hover img.blur{
    transition: all .5s ease;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px); 
    filter: blur(10px); 
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /*IE6~IE9 */
}

大家逐渐来剖析下这个编码:

最先1般的CSS3 blur滤镜完成编码以下:

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

SVG滤镜完成:

无论捣腾甚么方式,搞1个编码以下,且全名为blur.svg的SVG文档:

<?xml version="1.0" encoding="utf⑻"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">     
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>

上面defs标识的编码便是加上的滤镜编码。

以下CSS启用编码:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
随后,实际效果就出来了。假如你手上的访问器是FireFox25-就可以看到实际效果。

IE10和IE11和之后的IE11+全是适用SVG的滤镜的,可是,此demo在这些访问器下是失效的,为什么?

仿佛由于其不适用立即在CSS应用应用filter: url的写法,实际上,要想完成IE10, IE11下的模糊不清实际效果,也是能够,便是可用性差了点,照片要写入SVG编码,相近下面:

<?xml version="1.0" encoding="utf⑻"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">
     <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
    <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" />
</svg>

随后,SVG做为情况照片加载:

.blur {
    background-image: url(blur.svg);
}

这样便可以了。

IE6?-IE9访问器能够依靠IE filter模糊不清滤镜完成,以下CSS:

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
 

因此最后综合性编码:

.blur {    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

流彩文本实际效果

先上css编码:

.wrap:hover .text-gradient { 
    position: relative;
    z-index:2;
    display: inline-block;
    color: black;
    font-size: 30px;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
 }
 @-webkit-keyframes masked-animation {
     0% { background-position: 0 0;}
     100% { background-position: ⑴00% 0;}
 }

表明:

将渐变色色设定为文本所属盒的情况色:background-image: linear-gradient(...)
取文本的样子与情况(长方形)的相交:-webkit-background-clip: text
删掉遮盖在获得相交之上的原文本样子:-webkit-text-fill-color: transparent
background-clip 特性要求情况的绘图地区。

英语的语法:

background-clip: border-box|padding-box|content-box;
值对应于:情况被剪裁到边框盒,内边距框,內容框。
这里用到的text只可用于chrome访问器。

在历经上述流程后获得了渐变色色填充文本的实际效果,但实则展现的是历经剪裁以后的情况,故要完成颜色的流动性,则必须情况开展循环系统地流动性,则可以使用CSS3 animation循环系统更改background-position可破之,但在动漫实际效果上有两坑必须留意:

background: linear-gradient(...)是好几个特性的简写,在@keyframes中改动某项的值请应用实际的特性,不然若应用简写则会遮盖以前的设定。
原始设定情况时必须设定background-size-x>100%。让情况照片尺寸水平方位扩张1倍,这样background-position才有挪动与转变的室内空间。

边框屈伸实际效果

完成边框屈伸实际效果总编码:

.border{
    position: absolute;
    width:300px;
    height:225px;
    z-index:2;
    top:0;
    left:0;
}
 .border::before, .border::after {
     content:" ";
     display: block;
     position: absolute;
     width: 0;
     height: 0; 
     box-sizing: border-box;
     transition-property: height,width,left,top;
     transition-duration: 0.5s;
     transition-timing-function: ease-in;
     z-index:2;
 }
 .border::before {
     height: 100%;
     left: 50%;
 }
 .wrap:hover > .border::before {
     left: 0;
     width: 100%;
     border: 6px solid #000;
     border-left-color: transparent;
     border-right-color: transparent;
 }
 .border::after {
     width: 100%;
     top: 50%;
 }
 .wrap:hover > .border::after {
     height: 100%;
     top: 0;
     border: 4px solid #000;
     border-top-color: transparent;
     border-bottom-color: transparent;
 }

关键根据border:6px solid #000这个特性,当width和height都设定为100%时,把上下或左右的border设定为transparent便可以完成::after和::before组装发展方形,两侧全是从正中间拓展,因此最开始left和top设定为50%;最终必须留意 transition-property: height,width,left,top;的设定。

最后实际效果如图所示:

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助~假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用!