急一个选择器的问题 - css吧

level 2

代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo{
text-decoration:none;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: black;
display: inline-block;
margin:0px auto;
z-index: 0;
}
.demo:hover{
text-decoration:none;
background-color: red;
z-index: 1;
border-color: blue;
border-style: solid;
border-width: 0 3px 3px 0;
transform: left;
}
</style>
</head>
<body>
<a href="#" class="demo"></a>
</body>
</html>
我想让一个圆形的图片，当鼠标移上去的时候变成勾勾可是现在只变蓝不变形状求解

2018年11月14日 15点11分 1

level 2

是我啊池灵ლ 楼主

求大佬快快快

2018年11月14日 15点11分 2

level 2

是我啊池灵ლ 楼主

没有一个大佬愿意帮我的吗？

2018年11月15日 10点11分 3

level 6

我的钱怎么没有了

hover里面没有一句是让他变成√的当然不会变，并且只用css形状变换做不到变成√吧

2018年11月19日 03点11分 4

level 7

杜梦lifeEVV8

都是在怎么学习呀，我马上毕业了，家是深圳的想报个培训班，你们有在动力节/培训过得吗，听说动力/节点在深圳开了一家分校区，不知道怎么样

2020年01月10日 01点01分 6

level 2

熊掌不红烧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/pc2.css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=10,initial-scale=1,user-scalable=no">
<meta name="applicable-device" content="pc,mobile" />
<style>
#box1{
width:0;
height:0;
margin-top:5%;
margin-left:5%;
border-top:200px solid black;
border-right:200px solid red;
border-bottom:200px solid green;
border-left:200px solid blue;
border-radius:50%;
cursor:pointer;
transition:border-top 0.6s,border-right 0.6s,border-bottom 0.6s,border-left 0.6s,border-radius 0.6s,transform 0.6s;
-webkit-transition:border-top 0.6s,border-right 0.6s,border-bottom 0.6s,border-left 0.6s,border-radius 0.6s,transform 0.6s; /* Safari */
}
#box1:hover{
border-top:200px solid white;
border-right:35px solid blue;
border-bottom:35px solid green;
border-left:200px solid white;
border-radius:12%;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="box1">
</div>
</body>
</html>

2020年01月17日 14点01分 7

level 2

熊掌不红烧

尽情的蹂躏吧

2020年01月17日 14点01分 8

level 2

熊掌不红烧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/pc2.css" charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=10,initial-scale=1,user-scalable=no">
<meta name="applicable-device" content="pc,mobile" />
<style>
#box1{
width:0;
height:0;
margin-top:5%;
margin-left:5%;
border-top:200px solid black;
border-right:200px solid red;
border-bottom:200px solid green;
border-left:200px solid blue;
border-radius:50%;
cursor:pointer;
transition:border-top 0.6s,border-right 0.6s,border-bottom 0.6s,border-left 0.6s,border-radius 0.6s,transform 0.6s;
-webkit-transition:border-top 0.6s,border-right 0.6s,border-bottom 0.6s,border-left 0.6s,border-radius 0.6s,transform 0.6s; /* Safari */
}
#box1:hover{
border-top:200px solid white;
border-right:35px solid blue;
border-bottom:35px solid green;
border-left:200px solid white;
border-radius:12%;
transform: rotate(405deg);
}
</style>
</head>
<body>
<div id="box1">
</div>
</body>
</html>
div彩色旋转变勾勾2，这个思路还可以继续做，把勾勾画漂亮一点。

2020年01月17日 14点01分 9