扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >CSS3中怎么利用animation属性实现雪花飘落特效
  • 106

0
分享到

CSS3中怎么利用animation属性实现雪花飘落特效

2024-04-02 19:04:59 106人浏览 独家记忆
摘要

这篇文章给大家介绍css3中怎么利用animation属性实现雪花飘落特效，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。在CSS3中我们可以使用animation属性来创建复杂的动画效

这篇文章给大家介绍css3中怎么利用animation属性实现雪花飘落特效，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。



在CSS3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transfORM，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。

比如：

代码如下:


@keyframes bGChange{
from {background:red;}
to {background:yellow}
}
div:hover{
animation:bgchange 5s;
}


当鼠标悬停在<div>时，该<div>的背景颜色会在五秒之内从红色变为黄色。

注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！

下面代码实现雪花飘落功能：

代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>snowing snow</title>
<style>
body{
background: #eee;
}
@keyframes mysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
transform: rotate(1080deg);
}
100%{
transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-WEBkit-keyframes mysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-webkit-transform: rotate(1080deg);
}
100%{
-webkit-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-moz-keyframes mysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-moz-transform: rotate(1080deg);
}
100%{
-moz-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-ms-keyframes mysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-ms-transform: rotate(1080deg);
}
100%{
-ms-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
@-o-keyframes mysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-o-transform: rotate(1080deg);
}
100%{
-o-transform: rotate(0deg);
opacity: 0;
bottom:0;
}
}
.roll{
position:absolute;
opacity:0;
animation: mysnow 5s ;
-webkit-animation: mysnow 5s ;
-moz-animation: mysnow 5s ;
-ms-animation: mysnow 5s ;
-o-animation: mysnow 5s ;
height:80px;
}
.div{
position:fixed;
}
</style>
</head>
<body>
<div id="snowzone" >
</div>
</body>
<script>
(function(){
function snow(left,height,src){
var div = document.createElement("div");
var img = document.createElement("img");
div.appendChild(img);
img.className = "roll";
img.src = src;
div.style.left=left+"px";
div.style.height=height+"px";
div.className="div";
document.getElementById("snowzone").appendChild(div);
setTimeout(function(){
document.getElementById("snowzone").removeChild(div);
// console.log(window.innerHeight);
},5000);
}
setInterval(function(){
var left = Math.random()*window.innerWidth;
var height = Math.random()*window.innerHeight;
var src = "s"+Math.floor(Math.random()*2+1)+".png";//两张图片分别为"s1.png"、"s2.png"
snow(left,height,src);
},500);
})();
</script>
</html>

关于CSS3中怎么利用animation属性实现雪花飘落特效就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

--结束END--

本文标题: CSS3中怎么利用animation属性实现雪花飘落特效

本文链接: https://lsjlt.com/news/72627.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS3中怎么利用animation属性实现雪花飘落特效
    这篇文章给大家介绍CSS3中怎么利用animation属性实现雪花飘落特效，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。在CSS3中我们可以使用animation属性来创建复杂的动画效...
    99+
    2024-04-02
  • CSS3如何实现雪花飘落特效
    这篇文章主要介绍“CSS3如何实现雪花飘落特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3如何实现雪花飘落特效”文章能帮助大家解决问题。在CSS3中我们可以使用animation属性来创建...
    99+
    2023-07-04
  • 怎么用CSS3实现雪花飘落的效果
    这篇文章将为大家详细讲解有关怎么用CSS3实现雪花飘落的效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　我们可以根据自己想要的动画效果来设置动画，比如在本例中：...
    99+
    2024-04-02
  • JavaScript实现雪花飘落效果特效
    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪，是冬天的灵魂，为大地铺好背景，之后发生的都如梦似幻，就像童...
    99+
    2023-01-01
    js雪花特效 雪花特效
  • HTML5中canvas如何实现雪花飘落特效
    这篇文章给大家分享的是有关HTML5中canvas如何实现雪花飘落特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。最终效果图如下： 图1一、需求分析圆形雪花本示例中雪花形状使用圆形雪花数量固定根据图1...
    99+
    2023-06-09
  • html5中怎么利用canvas实现3d雪花飘舞效果
    html5中怎么利用canvas实现3d雪花飘舞效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。var SCREEN_WID...
    99+
    2024-04-02
  • 怎么在Android中实现一个花瓣飘落效果
    这篇文章给大家介绍怎么在Android中实现一个花瓣飘落效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系统，主要使用于移动设备，如智...
    99+
    2023-06-14
  • CSS3 中怎么利用animation实现幻灯片轮播特效
    CSS3 中怎么利用animation实现幻灯片轮播特效，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。代码<!DOCTYPE ...
    99+
    2024-04-02
  • css3中animation动画属性怎么用
    这篇文章给大家介绍css3中animation动画属性怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。 　　CSS主要是用于描绘网页的样式和布局而CSS3是最新的CSS标准，提供...
    99+
    2024-04-02
  • css3中怎么利用animation实现逐帧动画效果
    css3中怎么利用animation实现逐帧动画效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。常见用法：:hover{&n...
    99+
    2024-04-02
  • CSS3 中怎么利用animation实现逐帧动画效果
    本篇文章给大家分享的是有关CSS3 中怎么利用animation实现逐帧动画效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。animatio...
    99+
    2024-04-02
  • 怎么在CSS3中利用transition属性实现过渡效果
    怎么在CSS3中利用transition属性实现过渡效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。属性详解transition属性目的是让css的一些属性（如backg...
    99+
    2023-06-08
  • 怎么在CSS3中使用Animation动画属性
    本篇文章为大家展示了怎么在CSS3中使用Animation动画属性，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。要使用animation动画，先要熟悉一下keyframes,Keyframes的语法...
    99+
    2023-06-08
  • css3中怎么使用animation属性实现背景颜色动态渐变的效果
    本篇内容主要讲解“css3中怎么使用animation属性实现背景颜色动态渐变的效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3中怎么使用animat...
    99+
    2024-04-02
  • 怎么用JS代码实现情人节爱心满屏飘落特效
    今天小编给大家分享一下怎么用JS代码实现情人节爱心满屏飘落特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们...
    99+
    2024-04-02
  • CSS3文字特效属性text-shadow怎么用
    小编给大家分享一下CSS3文字特效属性text-shadow怎么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！ 　　一、text-shadow的写法 　　text-shadow是CS...
    99+
    2024-04-02
  • 怎么在CSS3中利用transition属性实现下划线
    怎么在CSS3中利用transition属性实现下划线？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。transition属性transition： 简写属性，用于在一个属性中设...
    99+
    2023-06-08
  • 如何利用CSS3的transition属性实现滑动效果
    这篇文章主要讲解了“如何利用CSS3的transition属性实现滑动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS3的transitio...
    99+
    2024-04-02
  • CSS3中怎么利用text-shadow属性实现多种效果的文字样式
    这篇文章给大家介绍CSS3中怎么利用text-shadow属性实现多种效果的文字样式，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。 text-shadow属性text-sha...
    99+
    2024-04-02
  • 怎么用css3+jquery实现荷花图效果
    这篇文章主要介绍“怎么用css3+jquery实现荷花图效果”，在日常操作中，相信很多人在怎么用css3+jquery实现荷花图效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作