前端开发css3旋转的小星星
摘要： java前端android开发工具 苹果和安卓通用的前端开发工具 前端在线开发工具 css3旋转的小星星 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ ……
| java前端android开发工具 |
| 苹果和安卓通用的前端开发工具 |
| 前端在线开发工具 |
css3旋转的小星星
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
}
.box a {
display: block;
width: 100px;
height: 100px;
background: pink;
text-align: center;
text-decoration: none;
color: #cdcdcd;
line-height: 100px;
transform: rotate(-45deg);
transition: all 2s;
border-radius: 50%;
}
.box span {
display: block;
width: 100px;
height: 100px;
background: pink;
transform: rotate(22.5deg);
border-radius: 50%;
transition: all 2s;
}
.box a:hover,
.box span:hover {
text-shadow: 0 0 20px #fff, 0 0 8px #fff;
background-color: #fa0;
border-radius: 0;
}
.box a:hover {
transform: rotate(315deg);
}
.box2 {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
}
.box2 a {
display: block;
width: 100px;
height: 100px;
background: pink;
text-align: center;
text-decoration: none;
color: #cdcdcd;
line-height: 100px;
transform: rotate(-45deg);
transition: all 2s;
}
.box2 span {
display: block;
width: 100px;
height: 100px;
background: pink;
transform: rotate(22.5deg);
transition: all 2s;
}
.box2 a:hover,
.box2 span:hover {
text-shadow: 0 0 20px #fff, 0 0 8px #fff;
background-color: #fa0;
}
.box2 a:hover {
transform: rotate(315deg);
}
</style>
</head>
<body>
<div class=”box”>
<a href=”##”>
<span
><span><span>小星星</span></span></span
>
</a>
</div>
<div class=”box2″>
<a href=”##”>
<span
><span><span>小星星</span></span></span
>
</a>
</div>
</body>
</html>
| wedstrom前端开发工具 |
| 前端代码开发工具 |
| web前端开发工具推荐 |
» 本文来自：前端开发者 » 《前端开发css3旋转的小星星》
» 本文链接地址：https://www.rokub.com/8114.html
» 您也可以订阅本站：https://www.rokub.com
近期评论