H5+CSS3设计动态的首页背景

最新推荐文章于 2024-06-20 23:28:37 发布

程序猿里我是最帅的

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量4.1k

点赞数 2

分类专栏： H5+CSS3 文章标签： H5 css3

本文链接：https://blog.csdn.net/zhangfan_12871/article/details/77351734

版权

H5+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2016~2017热门语言排行榜</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(img/rain.jpg);
}
div {
width: 1139px;
margin: 50px auto;
}
li {
width: 205px;
height: 120px;
margin: 40px 10px;
background: rgba(0,0,0,0.5);
list-style: none;
float: left;
position: relative;
z-index: 1;
/*opacity: 0.1;*/
}

li:nth-of-type(9n+6) {
margin-left: 120px;
}
li:before,li:after {
content: "";
width: 205px;
height: 120px;
background: rgba(0,0,0,0.5);
position: absolute;
/*margin: 40px 10px;*/
}
li:before {
transform: rotate(-60deg);
z-index: 1;
}
li:after {
transform: rotate(60deg);
z-index: 1;
}
li p {
position: absolute;
top:50%;
left: 50%;
line-height: 90px;
color: white;
font-size: 2em;
display: block;
height: 3em;
width: 3em;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
text-align: center;
border-radius: 50%;
border: solid 5px white;
transition: 1s;
z-index: 5;
}
li:nth-of-type(1) p{
background: #2BB121;
}
li:nth-of-type(2) p{
background: #0864C1;
}
li:nth-of-type(3) p{
background: #7CBC00;
}
li:nth-of-type(4) p{
background: #1D5AF3;
}
li:nth-of-type(5) p{
background: #FF4100;
}
li:nth-of-type(6) p{
background: #F56E31;
}
li:nth-of-type(7) p{
background: #D33C28;
}
li:nth-of-type(8) p{
background: #1D5AF3;
}
li:nth-of-type(9) p{
background: #E35993;
}
li:nth-of-type(10) p{
background: #44B39C;
}
li:nth-of-type(11) p{
background: #1D5AF3;
}
li:nth-of-type(12) p{
background: #E35993;
}
li:nth-of-type(13) p{
background: #FF7400;
}
li:nth-of-type(14) p{
background: #483A82;
}
li:hover p{
transform: rotate(360deg) scale(1.5);
z-index: 5;
}
</style>
</head>
<body>
<div>
<ul>
<li>JS</li>
<li>Java</li>
<li>Pyt</li>
<li>Ruby</li>
<li>PHP</li>
<li>C++</li>
<li>CSS</li>
<li>C#</li>
<li>C</li>
<li>Go</li>
<li>Shell</li>
<li>Obj-C</li>
<li>Scala</li>
<li>Swift</li>
</ul>
</div>
</body>

</html>

程序猿里我是最帅的

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
H5+CSS3设计动态的首页背景

2016~2017热门语言排行榜* {margin: 0;padding: 0;}body {background: url(img/rain.jpg);}div {width: 1139px;margin: 50px auto;}li {width: 205px;height: 120px;margin: 40px 10px;b
复制链接

扫一扫

专栏目录