一个非常简单的css小案例
学习写代码是一件非常枯燥的事情,没有动力是学习的动力是学不下去的,去找每天一个小案例一边学一边锻炼自己的实操能力,加油程序员们~。
HTML代码若下:
<div id="cover">
<form method="get" action="">
<div class="tb">
<div class="td"><input type="text" placeholder="搜索一下" required></div>
<div class="td" id="s-cover">
<button type="submit">
<div id="s-circle"></div>
<span></span>
</button>
</div>
</div>
</form>
</div>
css部分:
<style>
/* 通用选择器,设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现 */
* {
outline: none;
}
html,body {
height: 100%;
min-height: 100%;
}
/* 盒子 背景色*/
body {
margin: 0;
background-color: #849ef1;
}
.tb {
display: table;
width: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
}
input,
button {
color: #fff;
font-family: Nunito;
padding: 0;
margin: 0;
border: 0;
background-color: transparent;
}
#cover {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 550px;
padding: 35px;
margin: -83px auto 0 auto;
background-color: #ff7575;
border-radius: 20px;
box-shadow: 0 10px 40px #eddede, 0 0 0 20px #ffffffeb;
transform: scale(0.6);
}
form {
height: 96px;
}
input[type="text"] {
width: 100%;
height: 96px;
font-size: 60px;
line-height: 1;
}
input[type="text"]::placeholder {
/* 字体颜色 */
color: #a344da;
}
#s-cover {
width: 1px;
padding-left: 35px;
}
button {
position: relative;
display: block;
width: 84px;
height: 96px;
cursor: pointer;
}
#s-circle {
position: relative;
top: -8px;
left: 0;
width: 43px;
height: 43px;
margin-top: 0;
border-width: 15px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
transition: 0.5s ease all;
}
button span {
position: absolute;
top: 68px;
left: 43px;
display: block;
width: 45px;
height: 15px;
background-color: transparent;
border-radius: 10px;
transform: rotateZ(52deg);
transition: 0.5s ease all;
}
button span:before,
button span:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 15px;
background-color: #fff;
border-radius: 10px;
transform: rotateZ(0);
transition: 0.5s ease all;
}
#s-cover:hover #s-circle {
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
#s-cover:hover span {
top: 50%;
left: 56px;
width: 25px;
margin-top: -9px;
transform: rotateZ(0);
}
#s-cover:hover button span:before {
bottom: 11px;
transform: rotateZ(52deg);
}
#s-cover:hover button span:after {
bottom: -11px;
transform: rotateZ(-52deg);
}
#s-cover:hover button span:before,
#s-cover:hover button span:after {
right: -6px;
width: 40px;
background-color: #fff;
}
</style>
运行效果:
CSDN-Ada助手: 恭喜你开始博客创作!标题中的“一个非常简单的css小案例”让我很期待阅读你的博文。虽然是一个简单的案例,但我相信你能通过分享你的经验和见解,为读者提供有价值的内容。希望你能在博客中详细介绍这个案例的实现过程,并分享一些你在实践中遇到的挑战及解决方案。另外,也可以考虑与读者互动,鼓励他们尝试并提供他们的想法。期待看到你下一篇的创作!加油! 推荐【每天值得看】:https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1