CSS完成雨滴动漫实际效果的案例编码

日期:2020-10-15 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

玻璃窗

今日大家要完成的是雨滴实际效果,但是完成雨滴前,大家先把毛玻璃的实际效果弄出来,沒有玻璃窗,雨都进屋了,也有啥好敲打的。

<div class='window'></div>
.window {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            background-size: cover;
            background-position: 100%;
            filter: blur(10px);
}

 

实际上便是给1张照片,做了个模糊不清化的实际效果,看起来像毛玻璃的实际效果

1滴雨

雨滴的实际效果就凑巧妙了,让大家看下1滴雨详细的实际效果图

这滴雨实际上分成两个一部分,第1一部分是底部的黑影一部分,实际上是个边框来的,编码以下:

.border {
            position: absolute;
            margin-left: 92px;
            margin-top: 51px;
            border-radius: 100%;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
            transform: rotateY(0);
            width: 20px;
            height: 28px;
}

<div class='border'></div>

 

根据width和height特性和border-radius把border拉成1个椭圆型,随后用box-shadow把黑影拉出来,做为水滴的黑影,边框的最后实际效果以下:

随后是水滴的一部分

.raindrop {
            filter: brightness(1.2);
            position: absolute;
            margin-left: 90px;
            margin-top: 50px;
            background-size: 5vw 5vh;
            border-radius: 100%;
            background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            transform: rotate(180deg) rotateY(0);
            background-position: 48.1994160428% 54.3259834959%;
            width: 24px;
            height: 28px;
}
<div class='raindrop'></div>

 

  • 水滴用background-image设定了玻璃的照片做为倒映,倒映之因此是倒映,是由于身影是倒着的,因此用transform的rotate()转动了照片180,恰好倒过来
  • 根据background-position设定照片在水滴的显示信息的部位,后边不一样的水滴会显示信息出的倒映由于照片部位的转变都不一样,显得真正
  • raindrop的width比border的width多几个像素,是以便让水滴的两侧盖住border,只留border的左右显示信息黑影
  • raindrop的margin-left和margin-top和border的也是略有不一样,是以便raindrop能垂直居中遮盖在border上面,使得水滴和黑影结合的更真正

独立无黑影的水滴实际效果以下:

任意雨滴

雨几乎都并不是1滴1滴来的,并且也不容易很有规律性的来,以便让雨滴任意出現在玻璃窗上,css-doodle架构。

<css-doodle use="var(--rule)"></css-doodle>

先建立1个css-doodle的自定组件

 

--rule: ( :doodle {
     @grid: 10x10/ 100%;
     overflow: visible;
}

打出10*10个grid,这样数最多能够出現100滴雨

transform: scale(@rand(.5, .9));

根据transform:scale让雨滴任意增大缩小

 

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
}

:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
 }

 

这里的:before和:after大伙儿看的是否很熟悉,实际上:before里边的內容便是前面border的款式,:after里边的便是前面raindrop的款式。content务必要有,由于在伪元素(before,after)里假如沒有设定“content”特性,伪元素是无用的,全部:before和:after里边的配备就都失效了。以便让雨滴显得更清楚,加了filter: brightness(1.2)让雨滴显得更亮1些。

这里边较为怪异的是@var(),它实际上便是css的自变量,在css-doodle做了1层包装,功效和css的var()是1样的,大家看下这些自变量的界定

 

--size:(4 + @r(1, 8));
--shadow-size: calc(((@var(--size)*0.3) - 1)*1px);
--mleft:@r(1, 100)px;
--mtop:@r(1, 100);
--mtop1:(@var(--mtop) - 1);
--mtopb:calc(@var(--mtop)*1px);
--mtopa:calc(@var(--mtop1)*1px);
--height:@r(15, 25)px;
--width:@r(8, 20);
--width1:(@var(--width) + 5);
--widthb:calc(@var(--width)*1px);
--widtha:calc(@var(--width1)*1px);

这里有几个坑要表明1下:

1号坑:css-doodle出示了@calc(),可是这里测算還是要用css的calc(),应用@calc()失效。
2号坑:在应用@var做加减法的情况下,+-号的两遍要有时间格,不然测算失效,谨记谨记。
3号并不是坑:测算好标值后,如何带上px企业呢,用calc(value*1px)这类方式便可以了,别的的企业还可以用这类方式。
4号表明:为何要用自变量?是由于before和after不在1起,以便让boder和raindrop的margin-left、margin-top、width、height等特性可以维持1致,就必须用自变量在before和after外面界定好,传值到里边去。

最后的实际效果以下:


 

没动漫实际效果如何敲打我窗

雨点假如只是这样洒在窗户,那就沒有敲打的意思,以便反映敲打,我决策让雨点动起来。

 

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}
:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}

 

关键是:before和:after里边的最终3行,是用来完成动漫实际效果的。

cubic-bezier()操纵动漫的速率,使得雨滴落到玻璃窗的实际效果更真实

animation-delay 雨点出現的時间任意,一样是以便实际效果更真实,真实的实际效果真不便

再看来看raindrop-fall的@keyframe设定

 

@keyframes raindrop-fall {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(2.5, 2.3) rotateY(0);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg) scale(1, 1) rotateY(0);
    }
}

总结

以上所述是网编给大伙儿详细介绍的CSS完成雨滴动漫实际效果的案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!