css3表单特效 |css3 3d 模型

input:focus{
border: 2px solid #f50057;
box-shadow: 0 0 10px #f50057;
}
input[type="submit"]{
background: #f50057;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover{
background: #ff3366;
}

以上代码可以实现输入框获得焦点时的动态效果和提交按钮的样式。其中输入框获得焦点时，边框颜色和阴影都发生变化，让用户更加明显地知道自己正在输入的位置；而提交按钮在鼠标悬停时会有颜色的变化，提醒用户这是可以点击的按钮。

除此之外，大家还可以通过CSS3实现更多的表单特效，例如：

input[type="text"]{
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
input[type="text"]:focus{
width: 300px;
}

以上代码可以实现输入框宽度的动态变化。当用户在输入框上点击鼠标时，输入框的宽度会自适应变宽，可以更好地容纳用户的输入内容。

总之，CSS3表单特效可以为网站带来更好的用户体验和美观度，同时也可以提高用户的使用便捷度。在设计网站时，可以充分利用CSS3表单特效，创造出更加优秀的用户体验。