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

淡淡的烟草味﹌ 2022-09-26 15:55 201阅读 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 条评论，201人围观）

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

相关阅读

相关通过按钮缩放图片

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

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

相关通过按钮缩放和切换图片

目录创建安卓应用文件ZoomControls将背景图片拷贝到drawable目录打开字符串资源文件strings.xml 输入代码打开主布局资源文件 activ

爱被打了一巴掌/ 2024年03月30日 10:52/ 0 赞/ 45 阅读

相关制作雪花飘落特效

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

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

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

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

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

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

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

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

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

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

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

相关 Query雪花飘落背景特效

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

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

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

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

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

相关简单说 JavaScript实现雪花飘落效果

说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 ![这里写图片

深藏阁楼爱情的钟/ 2022年06月05日 11:05/ 0 赞/ 660 阅读

相关【前端】CSS 背景图片缩放

通过background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。 CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的...

你的名字/ 2021年01月07日 12:36/ 0 赞/ 864 阅读