css动态做超简单的憨憨笑脸

天天都有人

于 2020-04-13 21:29:14 发布

阅读量651

点赞数 1

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

本文链接：https://blog.csdn.net/czhenjin/article/details/105498028

版权

本文介绍了如何使用CSS解决在动态效果绑定时遇到的问题。通过一个简单的笑脸实例，展示了如何避免不同ul中相同序号li元素绑定同一动态效果。代码简单易懂，适合初学者参考。

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

上次的css动态效果用的是一个

做的桃心，如果你用两个
- 做简单小动态你可能会发现一些小问题，你把动态绑定到
- 上的时候你会发现它会自动识别
- 的序号，（打个比方）也就是你只想让第一个ul的第一个li绑定动态但是你测试的时候发现第二个ul的li也会被绑上同样的动态。（应为电脑他们都是第一个li）。所以我做了一个简单又简单的可爱的笑脸，用的是两个ul的，看了我的代码你就知道怎么解决这个问题了，解决方法也是挺简单的。（如果你不知道我在说啥，可以去看一下我上一个文，哈哈）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
   
				margin:0;
				padding:0;
				background: bisque;
				list-style:none;
			}
			ul{
   
				height:50px;
				align-items: center;
				justify-content: center;
				display: flex;
			}
			li{
   
				width:20px;
				height:20px;
				border-radius:20px;
				margin-right:20px