页眉中包含表单,表单中只需包含label和Input.
- html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- header {
- font-family: Arial, Helvetica, sans-serif;
- background-color: #ddd;
- display: block;
- overflow: hidden;
- width: 500px;
- margin: 30px;
- border-radius: 6px;
- }
-
- .stylin_form_search1 {
- float: right;
- width: 200px;
- margin: 5px;
- padding: 5px;
- }
-
- .stylin_form_search1 input {
- float: right;
- width: 70px;
- padding: 2px 0 3px 5px;
- /* 去掉默认的突显轮廓线 */
- outline: none;
- font-size: 0.8em;
- border-color: #eee #ccc #ccc #eee;
- /* 针对其他浏览器厂商前缀*/
- border-radius: 10px;
- -webkit-transition: 2s width;
- /* 获取焦点时,宽度为200px */
- }
-
- .stylin_form_search1 input:focus {
- width: 200px;
- }
-
- /* 不显示标注 */
- .stylin_form_search1 label {
- display: none;
- }
- style>
- head>
-
- <body>
- <header>
- <form class="stylin_form_search1" action="#" method="post">
- <label for="search">searchlabel>
- <input type="search" id="search" name="search" placeholder="search" />
- form>
- header>
- body>
-
- html>
CSS3过渡可以让CSS属性产生动画效果。
过渡效果要写在原来属性中。
触发过渡效果的包括::hover伪类悬停,:focus伪类获取焦点等。
五个过渡属性:
transition-property:过渡的CSS属性名,例如color,width.
transition-duration:过渡持续时间,例如2s,500ms
transition-timing-function:过渡的调速函数,匀速,先快后慢或者先慢后快,例如:ease-in,ease-out等等。
transition-delay:过渡开始延迟时间,1s,200ms.
transition:简写,以上属性直接写,color 2s ease-in 100ms;