web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网站模板
>
后台模板
html5和css3表单必填字段美化效果
分类:
后台模板
日期:
2021-02-22
点击(0)
评论(0)
演 示
免费下载
简介
###### 简要教程简要教程 这是一款十分实用的html5和css3表单必填字段美化效果。许多网站上的注册表单上使用的都是*号来标识必填字段,该表单必填字段美化效果改用背景色、隐藏非必填字段和3d效果来提高用户的体验。 ##### HTML html结构非常简单:所有的必填字段都带有额外的class af-required。 ```html
Title
Name
``` ##### CSS 这里只看一下demo2的css代码,demo2的效果是使非必填字段隐藏。 我们为af-outer添加一个transition,并定义固定的高度和设置overflow为hidden, ```html .af-outer { overflow: hidden; height: 70px; box-shadow: 0 1px 0 #f5f5f5 inset; transition: all 0.5s linear; } ``` 在af-inner中设置transform origin为"center top",以便能看到高度减少时的动画效果。 demo中使用一个按钮(checkbox)来触发动画事件,按钮的id是af-showreq。我们使用的是 :not伪元素来获取需要的元素,当然你也可以给表单选项一个class,然后用兄弟选择器来获取它们。 ```html #af-showreq:checked ~ .af-form .af-outer:not(.af-required) { height: 0px; visibility: hidden; } #af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner { transform: scale(0); opacity: 0; } ``` 设置visibility为hidden将能使我们通过同一个按钮来回切换显示和隐藏状态。这里一定不能使用display: none。
相关推荐
设计团队博客css网站模板
无人机数码商店网站模板
移动版猎豹安全浏览器官网html5动画引导页
微信小程序的手势密码
白色简约布局html5模板
响应式商品展示和商品信息比较网格布局界面
广告
广告