桃花随意飘落

css3 + js

不实用第三方类库

效果图

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<script>
//生成从minNum到maxNum的随机数
const randomNum = (minNum, maxNum) => {
if (minNum && maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
} else if (minNum) {
return parseInt(Math.random() * minNum + 1, 10);
} else {
return parseInt(Math.random() * 10, 10);
}
} // 桃花素材
const snowflakeURl = new Array(8).fill().map((item, index) => `./images/icon_petal_${index + 1}.png`) // 随机六张图
const getImagesName = () => snowflakeURl[randomNum(8)]; // 创建一个雪花元素
const createSnow = () => {
const startPositionLeft = randomNum(document.body.offsetWidth);
let randomStart = Math.random();
randomStart = randomStart < 0.5 ? 1 : randomStart;
const snowboxCssText = `
position: fixed;
top:-10px;
width: 25px;
transform: rotate(0deg);
height: 26px;
background-repeat:no-repeat;
opacity:${randomStart};
background-image: url(${getImagesName()});
left:${startPositionLeft}px;
`;
const snow = document.createElement('div');
snow.style.cssText = snowboxCssText;
return snow;
} const main = () => {
// 造新落花
const snow = createSnow();
document.body.appendChild(snow);
const duration = randomNum(6, 10) * 1000; //随机下落时间
const endPositionLeft = Number(snow.style.left.replace('px', '')) - 100 + Math.random() * 500 + 'px'; //所及下落左/右位置
snow.animate([
{ top: 1000 + 'px', transform: `rotate(${randomNum(100, 360 * 3)}deg)`, left: endPositionLeft }
], {
duration })
snow.getAnimations().map((animation) => {
animation?.finished.then(() => {
console.log('finished');
snow.remove();
})
})
} main()
setInterval(async () => {
main()
}, 300) </script>
</body> </html>

图片资源下载

以下是我转成base64图片的代码,不需要图片资源

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<script>
const base64Img = [
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+1JREFUeNqclr9vFUcQx2f2ToAdGyp+PAkigZSIgCLFBEWisBSEKJIiNC7S0QRZCU2UFFCAlH8gilKlTEHrImnSUURQEMVVCgoQtAQMWC958bN573bzmd093/n9kCyfNLc/bne+M9+Z2T198tGiTHxUxBWFOOdoXerTKhO0NEXlyjRXlCXrVKY9pezu2YcsIBdVtYMU6vQl47vIA5EwiFbtCSREj94X1a9RfBzpIZV5B0gH6y/Qf8qiW6x8tRcQM+0KzZd0uoxeACa1qIlzG0gHyn4AbJk1/Ykg1XA4rh0F8P0ZzVeoXGPCG2aNUa9JQPovAIe1cEu0dyaBuBCCjArPB6i5LgYg4ncRsy7Yl4L3+3zlZVRKe414MSdOboL2GjgfLDAROKSmDldtECu8+gGjDksO8WVtjC7Qd9DE6ypb5xiuS2jiH1+m2GBdAjQQz35nn7zxGA5MjIlvgzh3rBD5hN3dhr6svC3sCRgUNHFpc5qC9WYiiFnWpFNYwsohm3zIFMm2wvHWADTEZCgAWWfYm1QvDYiGg9hzEeUbjcWIWh/FmG2tN1rU5y0hiepMKkr5z7ysBpVUVVUnUUMX1nyIwllkI3EO3yhVlHszJGYxqS3JA4kAFCXfSONhylSZAaRvOj2l4TOIi/xiHkovI71otc+8+xTYuh8sJWO/yulZRamG1SbtAvM/o2NRclHVteTiQu8PoeQdlA3aALGtEojPAElxu/UZyG8hnv5t1l+TVnBSTDSchJWD8P4ieVIHuKlEF6syURSpUhfjES3OfPNYIJ4zu4Re0/WL0V6aFXB6jozpR8VsiaxrfSQ0QJZJcRyMButorq3IT64pKyBZQ/kXyH2mXpontvwsEXyTrKG4NNXeDi9CyqZYE4Bwo2wflNvHaXN6Wwmw3H/MaMWya5alh9k3jPkv0cAWRY0Os1ZzVplpo140GPE4oBS4g0JYsWNlnmVvA/DMQjhJuQTZVg61dW3Ux9BY+YV8DuHNfuO/DBYoLzdQ+y3KZ/Gi2wZKMckAptxnoGlUZaOAKC02Nioz5AMLFNRdQ/ll+P+H+U3NkbcStEBHIGt9ywuV5pJpuQLOW0TmdzOgfTN2SYLvqfLfAFrG+nexvMeRu6mtlN1B0/SYzPF6THd10vVrbD4E7Bs8O4/Rn2PVGTzYwIM+HlRq93utvLkmpZWI8+zpAfydpONm6h1vCfAHi1d9FU7hwad4ch6lR5gb0G7ZD0XSHV/cEFLfJfeY+UmLorvbXyIDe4xnPxKIGdw8Qe6+B8BpLD2acjqSZX8qf9H7k8HfeBv28t9lj/2JPILQR7D6K9WmST+kOitPnfrr9b8AAwBO9bdMMR/shAAAAABJRU5ErkJggg==',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNqklM2OTUEQx7vqnDF3uBOCxOfGWixtvAE7mQUbD+AZbGzsrTyCiCewk1xjgzWrsZPIYIYYg3tPV/lV9zn3+hginJP/qeqvX1d3Vx/ZvryW3DxZtpRzl6zLRTlsDtsVv6q251mXuqifVXVFs5U2/f/ToIsq8ulfYYIOorN4a4AuuMjVOcyTH8AclyRj7LJIzMgYEafc4q5QOIR/iroz9DsmIqtol/KrpLpJJ6pVzjHyJsSxNRRdM/AkFlL6qbmZu1KjOhOxzJhORLfQSNSeM+Zz27RNhHWJ5iV333Q3aAokrMRcqXxEkS0WWepKiYjTUyJknqZJaEMVBBBMD+nV+0kGBuXyflcWeaxNWUEZ/Iiar7RqH0oaph12tOycyCKyavfzfUL9VrRp5Bd59pbKN/WYPVXtcX6/VgfsLgF5BNWysdHnPPYk0A9OwQuPIyha4H3wKnSMXWeSjdiaeFqyPJLuGhF+KeAibsRA/UGD6w2il9+Rmjpz2FE6EJXtxvWpy15AiwJQrAVI+RzB3iAttqVZrLntZpkk9X103jHLybOXOxkw61XAddlKyEzut4ny2c8b2HJ539EwZVZlEE+99EU9qPdH+Mtk7y1gk70ORPkLvAd4n7/CCbQ0/C16YJz22LMdRi8BXgcw+d2FbcuS3O8x6DX2Css9zXKtwvJHnHX0gKheALI/3f52npXJHwKYAFhl4Ah/SiQ7wKd/+yv5JsAAAqqzyhQ5+KYAAAAASUVORK5CYII=',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAZCAYAAADXPsWXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAshJREFUeNqcVD1rFUEUvWdm98XggxAVCxFEwYAoqIhoaSVYC9pYCBYW/gnBIvaCjWAaGxErLUXESkHEzpSChRpFA5oX4svc67kzu3mbZxI/5r3L7OzOOffcjxnMHzslG40QgoBWZj7FILGqtOr1xJ+7o5KtRw3IOVK4QYA5EXv5m8MtCCYBzBJ8jWqmQ4w7qGCWRDN/S1ITfIPgGcSwQIIh41nh/I1ElzmDlsNyqyzpejj1c8MlqjjMXHwBPC9oLAz47UiMcYo7FwWb52Q/eS6Q5KsTAIUYhcTN07yvqqvF2KvLO1WV1syMW+UqQQOauic0BK0RtMwQzjLM6fzNlY+RzPDtUWIHEJMiAo3qRjtkme9Oc3Wfq+MlsWbSsfN8N1gXnOV/dw0TG3D7EvdfVFNUrqA4wE4JOMlNS9YAy1wWVDkypUGHmiRKElT+omE5wQ0T/Pw9o8htoQNqzJ0igVipqWKBzrUtMRDjGW77MfLoOQoFGAhUkICZSE2DmfZYpReesxIO0IfZAQKG5gl2gJe3ebbkaydAm5doISwB9ir3SZYH7GFxd9DzpzXp0OzZFeRmSW1i+S3aFB3MebkzSc4J7KBq+Ome3WMGhjJr9o5RcczqYPY5AI8SSlEqXWV6YzhEgpUsHQXoP+2Ac52oIgSbsqDX+bBS2rmE48diL6Unz3r+0HTiWghFgRPsJsEdnp35VR2dOYajPS77BGmbvKKi6bQRwS4SPObF9HD8xLmSHu+DSTJom3208puGywTRnkSJt2WsgYuSpBPM7SSRg7FuZy/wWEQSmD2IkLsSo250+VSatKbnusTfqYRJnwRsH7sZK3nm/ja7AhlOYl4tdjRs47JPGa/5fIul/CjrqrSxkggPR2Q7bYIK3vJY3WOO3zAahfx5kCQNqfkdM/ic66cEvbcYkvzD8I79wCN7hddWyqX4j/FLgAEAEYiFiCZX+e4AAAAASUVORK5CYII=',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAXCAYAAADUUxW8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAolJREFUeNp8lL9rVEEQx2dm9/Q8jIeKSLTxH7AwjYi1/4GWFlcJ9qKkF1sFK7GxsbExhVjYaqtYGPxFEAXhxMTEHPFd8nbG77x9d777YTZMdnd2P/Nz3/HHcxfIBwehECMkHAutcCaEUEiMn2OrtRsORBIRkhCIhclUIUaR/g1mpsvEdBXLNm654hv2t3G2RnOGjEmiK5iuYd6G9GGoD+UR6O5ivzgXVg/B7LQR9bDvw4w2zgvIHs5uIYo4DUdNyXNxr0MzUhii6g8zJojtIL9TJrbMZmvQfYX2NWQQsWljseSXaARqFoUwIuOUCoRz1oItIa4Orm3ivBcR9nE2OQFPG5VXB9nqiioM5IrgqIChAuFvQ7FopkcjgC4uBVNPH16USVEtnwkp5crAGFrJ6h2gAEM/oV2PAFsA0xiEeM80cQY99cDgraoljg5D9xSLPwjbPJxQgQ4wN+qZ0xATpKL+QCRboBW/55634G2XU/UqlFIDdTDkyvvLgoMFwCt4HetVqwD/skQ/UJcOLGruT9UiMsnVZ7XaKw2R0pNRdF7tIeZVWLzoD4Lq/jo49lrlyl3II3C/jWrYD1NKz7G+5I2vnVYgjUD/KpgGzPKsWZLoeWG8T5Q+YXUSxoqRRxP3CE50AV4fw9DOxPO0/AqSGT9EuHfQxcJB8Xy9SDlk//diohGjsOsCvUXbXmJ/XkS3TKpP0kNuY36Dgm3MfBi159xSsnvo6QOAB1lsmGE9JMyvYMlmYZvQDVKZlgHeB1QCTsi5VOEP+/4YNMaXVJY3tUxdGGphbWmv3ITQtMyDfbwDdEPLsp2ylBCalv/BXoNVeL6OCAYw0oHQtETabxh9V009yz8YM+OvAAMAa97AOEdO7j0AAAAASUVORK5CYII=',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXZJREFUeNp0UUtKA0EQrd9kVCJBEjcewLVEF67cuPIM3kD34gVE3LnxCh5CvINuvYCgiCJJJGa6qn09iaCCPRRDV7+q9+oVP2zt0s8jpqxmfevYW7VUOzPP879QTJWInKrpNQrOAFLKRDlnEnenNsIZoGNR3QPwySobKqLuLlN3rUeSI6gECDZZ+ECUX1iFUDAx0/2qU0m9vFSAubQGjg+ZeEzQ1H7MY1AM8b/IOSoJD0L0oXAIOR+oajXlubbPiNj2Jg3MUwKNbIGei4QAQxQ5RXfTzjoOjYkFEuDZgYRZAZR7uFBqUhl4BcX3rD4yPBpeNjB5w0lQg0EQDp2g7maNa2jNlj3qIBqEeBMiFBgmYTSoXJOIG+QfiiWWmqaj2Xou6XWxhJYSTI/w8crUcslZmiXDS/W9KmRXYccr1ngC4JQWxRYpiUMOElroMNQdbucAjn5uF/Y4DKF1+PYMwCV636KT059jMPMdXY5AfZ9Vp/TP+RJgACFt0d6A0633AAAAAElFTkSuQmCC',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbdJREFUeNpcksFqFEEQhqt7ZjZZXVAUCV7zEh6EhBw8CV48COJJPAk+QMjJ9xCvgogiuejdN/AFvAkxGpSVbLq7qvy6ZxZXB2pmoOqr/6/qDl9uH0iMUWbzLemGgehltr0lIYZdLfpEU/5dcj7Oq/Q5rS7c1KQ+vfz7dOI+lJRnMYYjVbthylvtwN1fkX9J+CYYSOy52X2zsCDnVmTbzH+iKlbKkgYPqDkhjhtoZhIk7Gsuz+l1AqwaQs1lisQBR1i/kXlccvlE37OeGaL0/hCVr26eYxfRb6A0kJkAKmxWbKDBHZq/7hlhID+nyCJFAXDiRtBc6kK0lNpgie09mrzpsZi9s19w10OMGguKcZqcNdBd6jg2Ws58byK26Pkx7Hywzp+yyVOrcmtJngo1WCdYNfK92paDpY9B9S7nuQO0DBsz8gKuszao2u1ocmltKmH5MF+kU87wWkkpEsL/38hZqGnBZkM7x8nYGTM8EymPUL0ndVKXc1QTC7LRrlbr9cBWGzen4StW/oKqt0D7+LzlJrss7gposRG+jNXl/1duvc0fKL2j6D0zzrl0CxQXgPPpXL//EWAAgfSO+7ohlD8AAAAASUVORK5CYII=',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPhJREFUeNockDtOAzEQhsezXrISEgEEiCMgUQEF56CgIg00FJyFgkPkOLkBokZBKDzCZtfz4ndsfX5o5h//49TfzchEafX+QeFOpn4q4ziToZgM49zMljk8KO+0ND0+pP573Uopz0ieulWBXpvaQyaMqEtKbZ60Vx6+i8CKGyZmPkmJLmsSznzLTXMD6vmXEUkVThvidMbufu6qjxFhYAQU29JU9zq7DHP7ykngwWsD1QuEW+CtAZ+5bIYFSi894gBJay1iMOyuVgUdeEN33ovoEy73bnahokdI7AAqC8L+CuMJb8cP1C+o1GHfAxN0CI3/4Yu+/gUYACJeyfo1sqdUAAAAAElFTkSuQmCC',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNoUjEsKwkAQBd90j2bGIYJbEUQ8jgvPJIg7r+AdXHsZF+78xYQQ85lux1VBFZR5bLaoixKf+wvVs1h0TduTqkJEQURZNvF7F/zcAn9hXBI7GKwNmbE1zMHl4ZC4FJV3HKS0Pg+zoe1XEmPbfS2I6UpQvanIKb2n6XTkETe2qWqo6Dn28ZJiTcz4CTAA+1pDxlSYR4oAAAAASUVORK5CYII='
]; //生成从minNum到maxNum的随机数
const randomNum = (minNum, maxNum) => {
if (minNum && maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
} else if (minNum) {
return parseInt(Math.random() * minNum + 1, 10);
} else {
return parseInt(Math.random() * 10, 10);
}
} // 桃花素材
const snowflakeURl = new Array(8).fill().map((item, index) => `./images/icon_petal_${index + 1}.png`) // 随机六张图
// const getImagesName = () => snowflakeURl[randomNum(8)];
const getImagesName = () => base64Img[randomNum(8)]; // 创建一个雪花元素
const createSnow = () => {
const startPositionLeft = randomNum(document.body.offsetWidth);
let randomStart = Math.random();
randomStart = randomStart < 0.5 ? 1 : randomStart;
const snowboxCssText = `
position: fixed;
top:-10px;
width: 25px;
transform: rotate(0deg);
height: 26px;
background-repeat:no-repeat;
opacity:${randomStart};
background-image: url(${getImagesName()});
left:${startPositionLeft}px;
`;
const snow = document.createElement('div');
snow.style.cssText = snowboxCssText;
return snow;
} const main = () => {
// 造新落花
const snow = createSnow();
document.body.appendChild(snow);
const duration = randomNum(6, 10) * 1000; //随机下落时间
const endPositionLeft = Number(snow.style.left.replace('px', '')) - 100 + Math.random() * 500 + 'px'; //所及下落左/右位置
snow.animate([
{ top: 1000 + 'px', transform: `rotate(${randomNum(100, 360 * 3)}deg)`, left: endPositionLeft }
], {
duration })
snow.getAnimations().map((animation) => {
animation?.finished.then(() => {
console.log('finished');
snow.remove();
})
})
} main()
setInterval(async () => {
main()
}, 300) </script>
</body> </html>

css3桃花随意飘落的更多相关文章

  1. CSS3梅花三弄特效

    效果预览:http://hovertree.com/texiao/js/22/ 效果图: 代码如下: <html> <head> <meta http-equiv=&qu ...

  2. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  3. @font-face(css3属性)实如今网页中嵌入随意字体

    @font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format> ...

  4. CSS3随意记录

    1.注释 注释语法:/* 注解注释内容 */ 2.带有透明度 rgba(255,0,0,0.5);rgba(0,255,0,0.5);rgba(0,0,255,0.5); 0.5就带有透明的,介于0和 ...

  5. CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  6. CSS3动画第二式--组合动画

    接第一式之后的进阶招式,加入一些组合动画,剧情.动画啥的都是随意瞎想的,纯粹是为了熟悉2D.3D和过渡等css3代码写法.效果见下图: 代码如下(有点长,折叠一下): <!DOCTYPE htm ...

  7. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  8. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  9. CSS3与页面布局学习笔记(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  10. HTML5树叶飘落动画

    查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> &l ...

随机推荐

  1. FastAPI依赖覆盖与测试环境模拟

    title: FastAPI依赖覆盖与测试环境模拟 date: 2025/04/10 00:58:09 updated: 2025/04/10 00:58:09 author: cmdragon ex ...

  2. 🎀Charles激活

    简介 Charles激活码计算 激活 Help -> Register Charles 添加 Registered Name 和计算出的 License key 点击 Register Java ...

  3. 如何基于 Kestrel 实现 socks5 代理

    前言 之前做了个轮子NZOrz, 本来打算慢慢参照Kestrel和Yarp长久地写着玩 奈何川普上台,关税,订婚案,自身和钱包等等各种乐子层出不穷,无暇慢悠悠地写轮子玩 还有有些盆友也想知道能否直接使 ...

  4. 海康摄像头SDK在Linux、windows下的兼容问题

    零.前言 最近一直在做人脸识别相关的应用. 主要就是使用海康的摄像头抓拍.录制视频,使用虹软的sdk进行人脸识别,使用jna调用这些sdk. 海康的sdk在使用时遭遇了很多问题,主要问题就是windo ...

  5. 谷歌拥抱MCP标准:AI智能体连接数据的新篇章

    引人入胜的开头 在人工智能领域,每一次新技术的应用都意味着一次全新的突破.最近,Google DeepMind的CEO Demis Hassabis宣布了一个重要的消息--谷歌将采用Anthropic ...

  6. 理解 C# 中的各类指针

    目录 前言 对象引用(Object Reference) 指针(Pointer) 指针的声明和使用 指针可以指向的位置 可以声明指针的位置 指向值类型变量的指针 指向对象引用的指针 指向 GC Hea ...

  7. React最新面试攻略

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  8. 如何用IDEA 生成JavaDoc新版

    用IDEA生成JavaDoc 左上角四横杠点击,唤出工具栏(快捷键 alt+\) 左键单击工具选项 下拉框选 生成Javadoc 在弹出框选好参数立刻导出啦 1.JavaDoc 作用域: 选要导出的文 ...

  9. pytorch中的剪枝操作

    深度学习技术依赖于过参数化模型,这是不利于部署的,相反,生物神经网络是使用高效的稀疏连接的. 通过减少模型中的参数数量来压缩模型的技术非常重要,为减少内存.电池和硬件的消耗,而牺牲准确性,实现在设备上 ...

  10. PHP MD5强碰撞

    MD5强碰撞 搬得这个师傅的 https://www.cnblogs.com/kuaile1314/p/11968108.html 可以看到,使用了三个等号,这个时候PHP会先检查两边的变量类型,如果 ...