使用 CSS 3，可以让 HTML 表单变得更加强调视觉效果

发布时间：2023-08-31 13:49:45 所属栏目：经验来源：

导读：越来越多的WEB设计师开始关注CSS3过度效果的使用，过度效果不仅可以美化网站界面，自定义动画，而且还可以代替Javascript，增加搜索引擎的友好度。

　　下面为大家演示如何能够建立在HTML5中输入字段的动画效果

越来越多的WEB设计师开始关注CSS3过度效果的使用，过度效果不仅可以美化网站界面，自定义动画，而且还可以代替Javascript，增加搜索引擎的友好度。

　　下面为大家演示如何能够建立在HTML5中输入字段的动画效果。尤其是CSS3的:valid伪类，它是比以往任何时候都更容易自定义文本输入。

　　启动文件

　　首先我们需要准备一个空白的index.html文件。

<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>CSS3 Animated Form Inputs</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700"> </head>

　　提交按钮不会有什么效果，但会重新加载页面。建议不要链接到后端的PHP或Ruby脚本对数据进行处理，或者甚至通过Ajax连接。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!