2023新年祝福代码[css动画特效]

目录

前言

一、jQuery之家

二、2023新年祝福页面

2.1 我的博客和祝福语

2.2  我的博客头像和动态烟花

​编辑 2.3 背景为动图

三、完整效果图

总结


前言

心态还需努力呀在这里祝大家新的一年里愿望都能实现。2022年已经过去,2022年的遗憾、不开心,都将在2023年去弥补。让2023年的每一天都开开心心,有一个好的心态去看待每一件事情。是终点也是起点,大家一起加油~本项目资源已放到我的资源里,感兴趣的可以免费下载哦~


一、jQuery之家

本次的页面主要是运用了jQuery之家的内容,经过自己修改完成的页面。这也适合刚学前端不久,想要一些漂亮样式的小伙伴。我把官方链接放到下面,如果大家想要自己做好看的页面可以使用里面的内容。都是免费的哦~分享给大家,感觉不错的话记得收藏哦~

jQuery之家-自由分享jQuery、html5、css3的插件库

二、2023新年祝福页面

2.1 我的博客和祝福语

进入页面的开头就可看到,也希望大家能够在新的一年里每天开心。

2.2  我的博客头像和动态烟花

烟花是动图,这里不会插入gif图。。。

鼠标放上去时会缓慢换成我的博客头像

 2.3 背景为动图

三、完整效果图

 鼠标未放到烟花上图片

  鼠标放到烟花上图片


总结

2023年,我们都会更好~下载资源的链接我会放到该文章评论下。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是一个使用CSS3旋转动画实现地球绕太阳转的特效代码示例: HTML代码: ``` <div class="universe"> <div class="sun"></div> <div class="earth"></div> </div> ``` CSS代码: ``` .universe { width: 400px; height: 400px; margin: 0 auto; position: relative; perspective: 1000px; } .sun { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #ffeb3b 0%, #f44336 100%); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; animation: rotate-sun 10s linear infinite; } .earth { width: 50px; height: 50px; border-radius: 50%; background: blue; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); animation: rotate-earth 5s linear infinite; } @keyframes rotate-sun { from { transform: rotateY(0deg) rotateX(0deg); } to { transform: rotateY(360deg) rotateX(360deg); } } @keyframes rotate-earth { from { transform: rotateY(0deg) translateY(150px) rotate(0deg); } to { transform: rotateY(360deg) translateY(150px) rotate(-360deg); } } ``` 这段代码中,我们使用了CSS3的3D变换效果来实现地球绕太阳转的特效。通过设置父元素.universe的perspective属性,我们可以为其子元素创建一个三维场景。然后,我们使用rotateY和rotateX变换来实现太阳和地球的立体效果。 在rotate-earth动画中,我们使用了translateY(150px)和rotate(-360deg)来实现地球绕太阳转的效果,同时使用了rotateY变换来让地球随着太阳一起旋转。 你可以根据自己的需求修改元素的属性值来实现不同的动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心态还需努力呀

你的鼓励将是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值