css 制作有趣、简单的动态效果

最新推荐文章于 2025-02-17 08:00:00 发布

天天都有人

最新推荐文章于 2025-02-17 08:00:00 发布

阅读量923

点赞数 3

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Czhenjin/article/details/105467425

版权

这篇博客分享了一种使用CSS创建简单动态效果的方法，主要涉及nth-child、@keyframes和animation的知识。通过 nth-child 选择特定行，@keyframes 创建动画，animation 控制动画效果，实现了有趣的视觉体验。适合娱乐、整人或制造浪漫氛围。文中还提供了代码示例，鼓励读者尝试制作自己的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的scc动态效果可以娱乐、整人、搞点小浪漫的都行。
我这里列举的是我从逼站上看的一个视频学的想法，稍稍改装了一下发给朋友搞了个不是很浪漫的浪漫昂。自己理解了，并学习了一下发出来分享给大家。
这个动态效果中我们需要掌握 nth-child、@keyframes、animation的相关知识。

nth-child 我们写CSS样式时我们想给某一行写样式时可以这样nth-child（某一行）。
@keyframes 通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
3.animation属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
然后咋们看看这个代码哦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
		<title></title>
		<style>
			*{
   
				margin:0;
				padding:0;
				list-style:none;
			}
			#wangcode{
   
				display:flex;
				align-items:center;
				justify-content:center;
				height:100vh;
				background-color: darkblue;
			}
			ul{
   
				height:200px;
			}
			li{
   
				width:20px;
				height:20px;
				border-radius:20px;
				margin-right:20px;
				float:left;
			}
			li:nth-child(1){
   
			animation: love1 4s infinite;
			background-color:#f62e74;
			}
			li:nth-child(2){
   /* https://www.w3h5.com/post/101.html */
			animation:love2 4s infinite;
			background-color:#f45330;
			animation-delay: 0.15s;
			}
			li:nth-child(3){