基于CSS制作创意端午节专属加载特效


Posted in HTML / CSS onJune 01, 2022

介绍

本期将带给大家的是一个css创意特效——端午加载动画,想法是让粽叶,糯米,红枣绕圆旋转,然后聚集起来融合后变成一个可爱的小粽子的效果。继续阅读你将会得到图像外发光效果,滤镜效果,动画样式控制等知识。还等什么呢?赶紧抓紧学习,抓紧使用,不然就要等明年了~

演示

基于CSS制作创意端午节专属加载特效

点击查看效果演示

正文

挑选素材

本次我们分别会用到粽叶,糯米,红枣,粽子4个素材,最简单快捷的办法就是从confont官网上去挑选,然后直接拷贝的svg代码粘贴到我们的项目中。

基于CSS制作创意端午节专属加载特效

发光效果

因为考虑到素材中有糯米,其颜色偏白,故使用了黑色背景来使其更加醒目,同时为了不让其生硬,所以这里用css给其增加了外发光效果。代码非常简单只使用 filter: drop-shadow() 就可以做到,该方法是css将阴影效果应用于输入图像。这样图像就可以非常简单的实现外发光的效果,但缺点也很非常致命,因为它只会在 Chrome v.85.0.4183.121 以后才得到支持,要求的版本也算比较高了,当然如果浏览器不支持也不会产生负面影响的。

.loading-item{
    filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8))
}

基于CSS制作创意端午节专属加载特效

聚集动画

在这时候我们就要开始来写动画了,但在此之前,我们先定义好,动画的执行周期,和延迟时间。这样后面所有的动画都会使用到这两个值,后期就随时调整他们的参数,使之感觉上最佳。

$duration:4.2s;  // 执行周期
$delay:-$duration/2; // 延迟时间

这个主动画有两部分组成,第一大部分是旋转他们,我直接把三样素材都放到了 div.loading-assets 容器中,然后对这个容器进行360度的旋转即可。

.loading-assets{
    width: 100%;
    height: 100%;
    animation: rotate $duration infinite;
    animation-delay: $delay;
}
@keyframes rotate{
    0%,60%{
        transform: rotate(0deg);
    }
    80%,100%{
        transform: rotate(360deg);
    }
}

然后就通过scss的 for语法 对这三个素材进行遍历,依次给他们附上三个不同的动画,每个动画就是根据其位置,然后更改方位,因为写了绝对定位都在中心点固定者,所以在其方向的偏移也不难计算。

.loading-item{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8));
    @for $i from 1 through 3 { 
        &:nth-child(#{$i}) {
            animation: #{'item-move-'+$i} $duration infinite;
            animation-delay: $delay;
        }
    }
}
@keyframes item-move-1 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(0,-18px) scale(.7)}
    60% {transform: translate(0,-85px) scale(.7)}
    80% {transform: translate(0,-85px) scale(.7)}
}

@keyframes item-move-2 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(-16px, 12px) scale(.7)}
    60% {transform: translate(-90px, 65px) scale(.7)}
    80% {transform: translate(-90px, 65px) scale(.7)}
}

@keyframes item-move-3 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(16px, 12px) scale(.7)}
    60% {transform: translate(90px, 65px) scale(.7)}
    80% {transform: translate(90px, 65px) scale(.7)}
}

基于CSS制作创意端午节专属加载特效

融合效果

因为刚才的三种素材聚集起来然后合成粽子的话,会感觉有些生硬,所以就要做出一个在感官上三种素材发生融合的效果。这里,我们用到了 svg的滤镜效果:

.loading-item{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.8));
    @for $i from 1 through 3 { 
        &:nth-child(#{$i}) {
            animation: #{'item-move-'+$i} $duration infinite;
            animation-delay: $delay;
        }
    }
}
@keyframes item-move-1 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(0,-18px) scale(.7)}
    60% {transform: translate(0,-85px) scale(.7)}
    80% {transform: translate(0,-85px) scale(.7)}
}

@keyframes item-move-2 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(-16px, 12px) scale(.7)}
    60% {transform: translate(-90px, 65px) scale(.7)}
    80% {transform: translate(-90px, 65px) scale(.7)}
}

@keyframes item-move-3 {
    0%,20%,100%{transform: translate(0,0) scale(1)}
    40% {transform: translate(16px, 12px) scale(.7)}
    60% {transform: translate(90px, 65px) scale(.7)}
    80% {transform: translate(90px, 65px) scale(.7)}
}

其中, feGaussianBlur 标签的目的是为了对输入图像进行高斯模糊,而 feColorMatrix 则是通过转换矩阵来对色值进行变换。

接下来,我们在创建一个 mix动画 在其需要融合的关键位置 通过 filter属性 引入刚才做滤镜效果,这一阶段就大功告成了 。

.loading-assets{
    width: 100%;
    height: 100%;
    animation: rotate $duration infinite,
        mix $duration infinite;
    animation-delay: $delay;
}

@keyframes mix{
    0%,40%{
      filter: url(#mix);
      opacity: 1;
    }
    8%,36%{
      opacity: 0;
    }
    48%,80%{
      filter: none;
      opacity: 1;
    }
    100%{
       filter: url(#mix);
       opacity: 1;
    }
}

基于CSS制作创意端午节专属加载特效

粽子出现

最后一步也是最简单的一步就是把可爱的小粽子对应起刚才融合后的空隙那段时间显示出来。

.loading-result{
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    position: absolute;
    margin-left: -25px;
    margin-top: -25px;
    animation: show $duration infinite;
    animation-delay: $delay;
    filter: drop-shadow(0px 0px 8px rgba(252, 233, 124,.5))
}

@keyframes show{
    0%,48%,100%{
      opacity: 0;
      transform:scale(1);
    }
    8%,36%{
      opacity: 1;
      transform:scale(1.5);
    }
}

当然,上面的代码我们可以发现,在 show动画 中,粽子显示的时候放大了1.5倍,目的是为了突出粽子完成合成操作的效果。还有毕竟三样素材累加后肯定体积会变大的。

基于CSS制作创意端午节专属加载特效

结语

粽粽情深,端午呈祥,酝酿了良多祝福,代替不了那句最朴实的祝福——端午节幸福安康!!

到此这篇关于基于CSS制作创意端午节专属加载特效的文章就介绍到这了,更多相关css加载特效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 #HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 #HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 #HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 #HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP7修改的函数
2021/03/09 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
python Opencv将图片转为字符画
2021/02/19 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL