搜索到
34
篇与
网络教程
的结果
-
我们常用的免费开源SVG icon图标库 收集整理了一些网络上常用的免费的svg icon图标库，可以直接在自己网站上引用，很是方便。1、Font Awesome网站：https://fontawesome.com/应该是引用最多的图标库了吧，有免费的，也有收费的。2、Google Material Icons网站：http://google.github.io/material-design-icons/Google官方出品。3、iconfont网站：https://www.iconfont.cn/collections/index阿里出品。4、flaticon网站：https://www.flaticon.com/uicons5、feather icons地址：https://github.com/feathericons/feather6、iconoir地址：https://github.com/lucaburgio/iconoir7、ionicons网站：https://ionic.io/ionicons注意ionicons的用法跟上面6个有点不同。
网站加入滚动字幕或公告说明 网站有时候可能会用到滚动字幕，滚滚更健康！CSS:/*滚动字幕*/ @media screen and (max-width: 500px) { body .scroll-notice-animate { animation: 30s wordsLoop linear infinite normal; } } .scroll-notice { background:#0aa7e4; color:#fff; white-space:nowrap; overflow:hidden; } .scroll-notice a { color:#fff; } .scroll-notice-animate { padding-left:20px; animation:35s wordsLoop linear infinite normal; } .scroll-notice-animate:hover { animation-play-state:paused; } @keyframes wordsLoop { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } /*滚动字幕*/滚动文本在head，或任意你需要的地方加入如下代码。<div class="scroll-notice"> <div class="scroll-notice-animate">欢迎来到核客互动，有任何问题请联系我!</div> </div>
使用Nginx反向代理绕过网站域名备案详解 下面是详细操作过程：server { listen 80; server_name blog.itxm.cn; #设置成需要绑定的域名 location / { proxy_pass http://xxx.xxx.xxx.xxx; #指向对应的主机，最好是用IP proxy_set_header X-Real-IP $remote_addr; proxy_set_header User-Agent $http_user_agent; }这里的header字段随意配置，反正也没什么用，就是给后端看的。全部删掉就剩下proxy_pass命令也行。然后再打开域名，就能使用了。此方法小编并未测试是否可用，如自己有需求可以测试一下。
PHP根据IP地址获取当地天气预报 获取真实ip先获取真实的IP地址，也有可能用户使用了代/理或者其他的，所以不能用PHP自带的函数了，用下面这段函数来获取//获取真实ip function real_ip() { $ip = $_SERVER['REMOTE_ADDR']; if (isset($_SERVER['HTTP_X_FORWARDED_FOR']) && preg_match_all('#d{1,3}.d{1,3}.d{1,3}.d{1,3}#s', $_SERVER['HTTP_X_FORWARDED_FOR'], $matches)) { foreach ($matches[0] as $xip) { if (!preg_match('#^(10|172.16|192.168).#', $xip)) { $ip = $xip; break; } } } elseif (isset($_SERVER['HTTP_CLIENT_IP']) && preg_match('/^([0-9]{1,3}.){3}[0-9]{1,3}$/', $_SERVER['HTTP_CLIENT_IP'])) { $ip = $_SERVER['HTTP_CLIENT_IP']; } elseif (isset($_SERVER['HTTP_CF_CONNECTING_IP']) && preg_match('/^([0-9]{1,3}.){3}[0-9]{1,3}$/', $_SERVER['HTTP_CF_CONNECTING_IP'])) { $ip = $_SERVER['HTTP_CF_CONNECTING_IP']; } elseif (isset($_SERVER['HTTP_X_REAL_IP']) && preg_match('/^([0-9]{1,3}.){3}[0-9]{1,3}$/', $_SERVER['HTTP_X_REAL_IP'])) { $ip = $_SERVER['HTTP_X_REAL_IP']; } return $ip; }根据IP地址获取城市信息这里使用百度地图的 api来获取//根据ip地址获取城市 function get_ip_city($clientip) { if (isset($_SERVER['HTTP_X_FORWARDED_FOR']) && $_SERVER['HTTP_X_FORWARDED_FOR'] && strcasecmp($_SERVER['HTTP_X_FORWARDED_FOR'], $unknown)) { $ip = $_SERVER['HTTP_X_FORWARDED_FOR']; } elseif (isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], $unknown)) { $ip = $_SERVER['REMOTE_ADDR']; } $url = 'http://api.map.baidu.com/location/ip?ip=' . $ip . '&ak=zyjHt3iUKWVHB5HjQYy7th1DTbKTPcGY'; $html = file_get_contents($url); $res = json_decode($html); $cheng = $res->content->address_detail->province; //城市 $sheng = $res->content->address_detail->city; //省份 $city = $cheng . $sheng; return $city; }根据城市名称获取天气通过上面的代码，已经获取到了IP地址和城市名称。现在获取天气，这里用的是今日头条的 api接口//获取真实ip $ip = get_real_ip(); //获取城市 $city = get_ip_city($ip); //根据城市获取天气 $result = get_curl("https://www.toutiao.com/stream/widget/local_weather/data/?city={$city}");获取结果城市我这里是随便选的。因为返回结果的内容挺长，所以这里我只截取一部分在这里展示请求结果{ "data": { "city": "北安", "ip": "119.182.**.**", "weather": { "alert": [ { "content": "北安市气象局2022年06月20日22时30分发布暴雨黄色预警信号：目前我市部分乡镇降水量已达30毫米，预计6小时内我市市区、二井、城郊、东胜、杨家、通北、石泉、红星农场、303林场等乡镇雨量可达50毫米以上，并伴有雷暴大风，请有关单位和个人注意做好预防工作。（预警信息来源：国家预警信息发布中心）", "infoid": 38, "level": "黄色", "name": "暴雨", "pub_time": "2022-06-20 22:30:00", "title": "北安市气象局发布暴雨黄色预警[III级/较重]", "type": "暴雨黄色", "update_time": "2022-06-20 22:44:46" }, { "content": "黑河市气象局于2022年6月20日8时50分发布大风蓝色预警信号：预计今天白天到夜间爱辉、孙吴、逊克、嫩江、五大连池、北安地区将受大风影响，平均风力5-6级，阵风7-8级，局地可能超过9级。请有关单位和个人注意做好预防工作。（预警信息来源：国家预警信息发布中心）", "infoid": 89, "level": "蓝色", "name": "大风", "pub_time": "2022-06-20 08:50:00", "title": "黑河市气象局发布大风蓝色预警[IV级/一般]", "type": "大风蓝色", "update_time": "2022-06-20 09:09:42" } ], "aqi": 19, "city_name": "北安", "current_condition": "中雨", "current_temperature": 17, "current_time": 1655737090, "dat_condition": "多云", "dat_high_temperature": 30, "dat_low_temperature": 16, "dat_weather_icon_id": "1", "day_condition": "小雨", "forecast_list": [ { "condition": "多云", "date": "2022-06-19", "high_temperature": "28", "low_temperature": "17", "weather_icon_id": "1", "wind_direction": "西北风", "wind_level": "3-4" }, { "condition": "小雨转大雨", "date": "2022-06-20", "high_temperature": "23", "low_temperature": "17", "weather_icon_id": "7", "wind_direction": "南风", "wind_level": "3-4" } ], "high_temperature": 23, "hourly_forecast": [ { "condition": "中雨", "hour": "22", "temperature": "17", "weather_icon_id": "8", "wind_direction": "W", "wind_level": "35.64" }, { "condition": "中雨", "hour": "23", "temperature": "17", "weather_icon_id": "8", "wind_direction": "S", "wind_level": "32.40" } ], "low_temperature": 17, "moji_city_id": 353, "night_condition": "大雨", "origin_data": { }, "quality_level": "优", "tips": "天冷了，该加衣服了！", "tomorrow_aqi": 13, "tomorrow_condition": "小雨转多云", "tomorrow_high_temperature": 28, "tomorrow_low_temperature": 14, "tomorrow_quality_level": "优", "tomorrow_weather_icon_id": "7", "update_time": "2022-06-20 22:50:08", "weather_icon_id": "8", "wind_direction": "西风", "wind_level": 5 } } }然后把它转换成数组$array = json_decode($result,true); $weather = $array['data']['weather']['day_condition']; echo $weather;这样就获取到了天气结果
鼠标移至头像CSS代码实现旋转效果的方法 我们是不是也有见过在访问有些博客网站的时候，鼠标移动到用户头像的时候看到头像会旋转？这个效果是如何实现的呢？其实很简单，我们只需要在CSS样式中加上样式即可实现，如果你也需要实现看下面的代码。<style> /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>我们将CSS样式添加到当前主题的CSS控制中。
