旋转加登录界面

最新推荐文章于 2020-05-18 18:25:35 发布

langju8013

最新推荐文章于 2020-05-18 18:25:35 发布

阅读量423

点赞数

分类专栏： html5 css

本文链接：https://blog.csdn.net/langju8013/article/details/75352582

版权

html5 css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="main.css" type="text/css" rel="stylesheet">
<title>day7 Sunny日志</title>
<style>
#div{
font-size: 20px;
color: aqua;
border-color: burlywood;
font-family: Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;
text-align: center;

}

/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 10px;
width:70%;
padding: 1em 2em 1em 5.4em;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border: 1px solid #999;
border-color: aqua;
border-radius: 10px;
text-align: left;
}
.login_btn{
width:300px;
margin:40px auto 0 auto;
background-color: aqua;
border-radius: 10px;
margin-top: 30px;
padding: 10px;
text-align: center;
background-color: aqua(100, 0, 0.4);

}
.login_btn input{
width:100%;
margin:0;
padding:.5em 0;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border:#1263be solid 1px;
background-color: aquamarine;

color:#FFF;
font-size:17px;
font-weight:bolder;
letter-spacing:1em;
/*border-radius: 10px;*/
}
.login_btn input:hover{
background:#1263be;
}

* {
margin: 0px;
padding: 0px;
}
h1 {
text-align: center;
margin: 20px 0;
}

#nav {
width: 980px;
height: 350px;
margin: 50px auto;
}

#nav ul {
list-style-type: none;
/*列表样式类型*/
}

#nav ul li {
background: rgba(155, 100, 200, 0.4);
float: left;
width: 180px;
height: 105px;
margin: 5px;
position: relative;
}

}
#nav ul li:before{
content: "";
display: block;
width: 180px;
height: 105px;
background-color: aqua(255,255,0,0.3);
position: absolute;
position: absolute;
transform: rotate(-60deg);
}

#nav ul li:after{
content: "";
background-color: red(100,200,255,0.4);
display: block;
width: 180px;
height: 105px;
position: absolute;
top: 0;
left: 0;

}
#nav ul li img{
position: relative;
z-index: 1;
margin-left: 50px;
margin-top: 12px;
transition: transform 2s;
}
#nav ul li img:hover{
transform: rotate(360deg) scale(1.2);
}
#ceng{
font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;
font-size: 15px;
color: burlywood;
}
#ceng1{
text-align: left;
}
#dong{
font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
color: darkgoldenrod;
text-align: center;
font-style: italic;
font-size: 30px;
}
</style>
</head>

<body background="images/a.jpg">

<div id="div">
<h1>用户登录</h1>
</div>
<div class="login_ico">

</div>

<div class="login_putin">
<ul>
<li><input type="text" placeholder="输入用户名/邮箱/手机号"></li>

<li><input type="password" placeholder="输入密码" ></li>
</ul>
</div>
<div class="login_btn">
<input type="submit" value="登陆">
</div>
<h1 id="ceng1">学习心得</h1>
<div id="ceng">

今天老师叫做这个六边形的图形，别人都做出来了，我做了一下午我都还没有做出来，我觉得自己好笨呀！

</div>
<hr>
<div id="nav">
<h4 id="dong" >点我，我会动哟</h4>
<ul>

<li><img src="images/1.png"></li>

<li><img src="images/2.png" /></li>

<li><img src="images/3.png" /></li>

<li><img src="images/4.png" /></li>

<li><img src="images/5.png" /></li>

</ul>
</div>

</body>
</html>