html栏目边框过渡动画小效果

天就来分享一些网页中会用到的展示的小效果

很多栏目的边框当鼠标移上去的时候，边框会有移动的色泽变化，有顺时针过渡或者逆时针过渡的效果

下面看看效果：

实现代码：

一篇文章我们说了单行文本框和多行文本框，今天呢我们继续看一下表单的其它控件：单选框、复选框、下拉框。

（1）单选框和复选框

在我们表单页面中，经常会有选择性别或者选择爱好这类的内容，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

使用语法：

单选框：<input type="radio" value="值" name="名称" checked="checked"/>

复选框：<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解：

1、type: 当 type="radio" 时，控件为单选框；当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序使用）

3、name：为控件命名，这里要注意同一组的单选按钮，name 取值一定要一致（具体可见下边的参考练习）。

4、checked：当设置 checked="checked"（也可以直接简写成checked）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含姓别（男、女）选择的单选框，默认选中男以及爱好（唱歌、打游戏、绘画、旅游）选择的多选框，默认选中唱歌。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

（2）下拉框

下拉框也是我们常用的一个表单控件，多用于选择城市地区等。

使用语法：

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解：

1、option：option为select下拉子元素，可以有一个或多个，写法类似ul和li，其中的value内容为提交数据到服务器的值（后台程序使用）

2、selected：当设置 selected="selected"（也可以直接简写成selected）时，该选项被默认选中

使用练习：

我们创建一个表单，表单里边包含一个城市的下拉框，下拉框中有北京、上海、天津这三个城市，其中默认选中天津。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，本篇文章就先给大家介绍这几个表单控件的语法以及使用，下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示，记得平时要多加练习才是王道。

每日金句：做人要像竹子一样每前进一步，都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

绍

sweetalert2是一个漂亮的、响应式、可定制的替代JAVASCRIPT原生的弹出框插件。sweetalert2相比sweetalert更加强大,但它不是sweetalert的扩展，它是一个全新的插件，且支持三大流行前端框架React、Vue、Angular。

Github和官网

https://github.com/sweetalert2/sweetalert2

https://sweetalert2.github.io/

安装

提供了很多安装方式

使用npm安装

npm install --save sweetalert2

使用cdn

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

注意：如果想要兼容IE11，还得引入polyfill.js

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

模块化用法

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')

示例

最基本的信息弹出框

Swal.fire('基本信息弹框')

标题下包含文字

Swal.fire(
 '标题下有文字',
 '标题下的文字?',
 'question'
 )

底部文字

Swal.fire({
 type: 'error',
 title: '标题',
 text: '出错啦！',
 footer: '<a href>为什么会出错?</a>'
 })

自定义html

Swal.fire({
 title: '<strong>HTML <u>示例</u></strong>',
 type: 'info',
 html:
 '你可以使用自定义的html<a href="https://wwwbaidu.com">百度一下<a>',
 showCloseButton: true,
 showCancelButton: true,
 focusConfirm: false,
 confirmButtonText:
 '好的',
 confirmButtonAriaLabel: '看起来不错',
 cancelButtonText:
 '取消',
 cancelButtonAriaLabel: '取消',
 })

自定义弹框的位置

Swal.fire({
 position: 'top-end',
 type: 'success',
 title: '你的修改以保存',
 showConfirmButton: false,
 timer: 1500
 })

函数回调

Swal.fire({
 title: '确定要删除么?',
 text: "删除后将无法撤销!",
 type: 'warning',
 showCancelButton: true,
 confirmButtonColor: '#3085d6',
 cancelButtonColor: '#d33',
 confirmButtonText: '确定',
 cancelButtonText:'取消'
 }).then((result) => {
 if (result.value) {
 Swal.fire(
 '删除成功!',
 '文件已被删除',
 'success'
 )
 }
 })

自定义图片，禁止动画

Swal.fire({
 title: '标题',
 text: '自定义图片',
 imageUrl: 'https://unsplash.it/400/200',
 imageWidth: 400,
 imageHeight: 200,
 imageAlt: 'Custom image',
 animation: false
 })

自定义宽度、边框和背景

Swal.fire({
 title: '自定义宽度、边框和背景',
 width: 600,
 padding: '3em',
 background: '#fff url(/images/trees.png)',
 })

自定义关闭（自动关闭）

let timerInterval
Swal.fire({
 title: '自动关闭的弹框!',
 html: '我会在<strong></strong> 秒后关闭.',
 timer: 2000,
 onBeforeOpen: () => {
 Swal.showLoading()
 timerInterval = setInterval(() => {
 Swal.getContent().querySelector('strong')
 .textContent = Swal.getTimerLeft()
 }, 100)
 },
 onClose: () => {
 clearInterval(timerInterval)
 }
}).then((result) => {
 if (
 // Read more about handling dismissals
 result.dismiss === Swal.DismissReason.timer
 ) {
 console.log('I was closed by the timer')
 }
})

异步提交

Swal.fire({
 title: '提交用户名',
 input: 'text',
 inputAttributes: {
 autocapitalize: 'off'
 },
 showCancelButton: true,
 confirmButtonText: '提交',
 cancelButtonText: '取消',
 showLoaderOnConfirm: true,
 preConfirm: (login) => {
 return fetch(`//api.github.com/users/${login}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(response.statusText)
 }
 return response.json()
 })
 .catch(error => {
 Swal.showValidationMessage(
 `请求出错: ${error}`
 )
 })
 },
 allowOutsideClick: () => !Swal.isLoading()
 }).then((result) => {
 if (result.value) {
 Swal.fire({
 title: `${result.value.login}'s avatar`,
 imageUrl: result.value.avatar_url
 })
 }
 })

三步曲

Swal.mixin({
 input: 'text',
 confirmButtonText: '下一步',
 showCancelButton: true,
 cancelButtonText:'取消',
 progressSteps: ['1', '2', '3']
 }).queue([
 {
 title: '问题1',
 text: '使用modal很简单？'
 },
 '问题2',
 '问题3'
 ]).then((result) => {
 if (result.value) {
 Swal.fire({
 title: '所有问题回答完成!',
 html:
 '你的答案是: <pre><code>' +
 JSON.stringify(result.value) +
 '</code></pre>',
 confirmButtonText: 'Lovely!'
 })
 }
 })

这里就简单介绍这些示例，更多示例详见官方文档

弹框类型

success

error

warning

info

question

浏览器兼容性

总结

sweetalert2是原本sweetalert的升级版，功能更加强大，文档更加全面，写法更加先进，是Web开发中常用的插件，当然同样优秀的还有很多，比如国产的layer.js也很好用，选择一个适合自己的就成，今天的介绍就到这里，希望能对你有所帮助，如果还有更好的推荐，欢迎到评论区留言，谢谢！

在线咨询

上一篇：可能是最全的Thymeleaf参考手册（十三）：文字模板模式
下一篇：什么是浏览器指纹？详解浏览器指纹技术，教你防止浏览器指纹识别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商