用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

淡淡的烟草味﹌ 2022-09-26 15:55 268阅读 0赞

雪花飘落：

//雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation: snowDown 3s linear infinite normal; position: relative; } @keyframes snowDown { from { opacity: 1; top: 0; } to { opacity: 0; top: 30em; } }

星星闪烁：

.starFlick { animation: starFlick 0.8s ease-out infinite; -webkit-animation: starFlick 0.8s ease-out infinite; } @keyframes starFlick { from { opacity: 1; } to { opacity: 0; } }

按钮缩放：

.ds_Btn { animation: ds_Btn 1.5s ease-in-out infinite; -webkit-animation: ds_Btn 1.5s ease-in-out infinite; } @keyframes ds_Btn { 0% { transform: scale(1, 1); } 25% { transform: scale(1.08, 1.08); } 50% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } .ql_Btn { animation: ql_Btn 1.5s ease-in-out infinite; -webkit-animation: ql_Btn 1.5s ease-in-out infinite; } @keyframes ql_Btn { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 1); } 100% { transform: scale(1.08, 1.08); } }

图片倾斜波动：

.peopleImg { animation: peopleImg 1.5s linear infinite; } @keyframes peopleImg { 0% { transform: skewY(0deg); -webkit-transform: skewY(0deg); } 25% { transform: skewY(1deg); -webkit-transform: skewY(1deg); } 50% { transform: skewY(0deg); -webkit-transform: skewY(0deg); } 100% { transform: skewY(-1deg); -webkit-transform: skewY(-1deg); } }

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关通过按钮缩放图片

运行效果： ![6a93d1dae6ab4ff5a3243b9dc4540970.gif][] 要用到的知识点： imageWidth = ivBear.getLayou

小咪咪/ 2024年03月30日 10:52/ 0 赞/ 86 阅读

相关制作雪花飘落特效

制作雪花飘落特效前言图形图像处理是计算机视觉的重要分支之一，也是很多其他领域的基础，如机器学习、人工智能等。OpenCV-Python 是一个基于 Python 的开源

迈不过友情╰/ 2024年03月17日 17:35/ 0 赞/ 122 阅读

相关【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

文章目录一、需求分析二、代码分析三、代码示例四、执行结果一、需求分析 ---------------

红太狼/ 2023年10月14日 14:52/ 0 赞/ 34 阅读

相关案例-图片缩放（CSS3）

案例-图片缩放（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

喜欢ヅ旅行/ 2023年10月03日 13:57/ 0 赞/ 42 阅读

相关 js实现雪花飘落效果

js实现雪花飘落效果我们可以先看看效果点这里 [雪花][Link 1] ![雪花飘落][watermark_type_ZmFuZ3poZW5naGVpdGk_

比眉伴天荒/ 2023年02月13日 05:50/ 0 赞/ 30 阅读

相关 js实现漂亮的雪花飘落效果

js实现漂亮的雪花飘落效果效果如下：雪花飘落四个按钮控制雪花的生成与停止关键代码：这个代码还有许多不足，希望大佬指正 var W =

Bertha 。/ 2022年12月25日 00:47/ 0 赞/ 227 阅读

相关全屏3D雪花飘落html代码,html5 ThreeCanvas.js全屏3D大雪花飘落动画特效

特效描述：html5 ThreeCanvas.js 全屏3D 大雪花飘落动画特效。全屏逼真雪花飘落特效，可随鼠标移动。代码结构 1. 引入JS 2. HTML代码

àì夳堔傛蜴生んèń/ 2022年10月07日 07:58/ 0 赞/ 227 阅读

相关用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

雪花飘落： //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-ani

淡淡的烟草味﹌/ 2022年09月26日 15:55/ 0 赞/ 269 阅读

相关 Query雪花飘落背景特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/5ae7a8091ab54da

雨点打透心脏的1/2处/ 2022年09月11日 03:29/ 0 赞/ 204 阅读

相关 css3之animation制作闪烁文字效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年07月16日 05:48/ 0 赞/ 242 阅读