首页
Search
1
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
45 阅读
2
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
38 阅读
3
如何在 IOS Shadowrocket 上配置服务
34 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
34 阅读
5
如何在 Clash for Windows 上配置服务
30 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
635
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
339
篇与
的结果
2024-08-22
解决foundation5下CSS伪元素::after在iOS14以上系统不显示问题
最近在写页面,发现ios下不显示,安卓和pc折叠导航下的CSS伪元素::after都能正常显示。解决方法:因为官方默认高度为0没有加上高度height对此,我们只需增加一段样式<style> .top-bar .toggle-topbar.menu-icon a span::after{ height: 1px; background: #fff } </style>即可解决该问题。
2024年08月22日
5 阅读
0 评论
0 点赞
2024-08-22
animate.css动画执行时间修改方法
Animate.css 作为一款强大的预设css3动画库,很值得我们在项目中引用。但是统一的动画时间不是很好看。可以通过下面css对其进行修改。.ssxin1为class,可以独立为每个动画设置.ssxin1.animated { -webkit-animation-duration: 1s; animation-duration: 2.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
2024年08月22日
9 阅读
0 评论
0 点赞
2024-08-22
css实现导航鼠标悬停走动酷炫效果
我们有时做项目需要使用到类似上面的效果,可以参考下面的代码实现方法html页面代码: <div class="header"> <ul> <li><a href="https://www.tpxhm.com/fdetail/828.html#">首页</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">最新活动</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">项目介绍</a></li> <li><a href="https://www.tpxhm.com/fdetail/828.html#">关于我们</a></li> <span class="move"> </span> </ul> </div>css代码实现: <style> * { padding: 0px; margin: 0px; } body{ min-width: 1280px; } .header { height: 56px; width: 100%; border: 1px solid gray; } div.logo { float: left; margin: 10px 50px; } div.logo span { font-size: 23px; display: block; float: right; } ul { list-style-type: none; padding: 0px; float: right; position: relative;/*子元素absol*/ } ul img{ position: relative; top: 3px; } ul li { width: 110px; height: 56px; text-align: center; float: left; } ul li a { color: #848789; text-decoration: none; line-height: 56px; } ul a:hover{ color: red; } .move{ height: 4px; width: 110px; border-top: 4px solid red;/*只需要将上边显示出来*/ position: absolute; left: 0; top: 52px; transition: left .2s ease-in-out 0s;/*包含四个过度属性:执行变换属性、执行时间、速率、延迟*/ -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/ -moz-transition: left .2s ease-in-out 0s;/*firefox*/ -o-transition: left .2s ease-in-out 0s;/*opera*/ } li:nth-child(1):hover~ .move{ /*li元素的父元素的第一个子元素,当鼠标停留其上时,move元素的left属性改变*/ left: 0px; } li:nth-child(2):hover~ .move{ left: 110px; } li:nth-child(3):hover~ .move{ left: 220px; } li:nth-child(4):hover~ .move{ left: 330px; } li:nth-child(5):hover~ .move{ left: 440px; } li:nth-child(6):hover~ .move{ left: 550px; } </style>使用上面的代码就可以实现出上图所示效果,供大家参考。
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
css关闭a标签点击出现蓝色背景问题
在做手机端页面的时候,会发现a标签点击会出现背景颜色问题,我们可以通过css样式来设置,解决这个问题。body { -webkit-tap-highlight-color:rgba(0,0,0,0); }这句代码加上去之后就不会出现点击背景颜色问题了。
2024年08月22日
10 阅读
0 评论
0 点赞
2024-08-22
一个css动画loading收藏
有时我们在开发项目需要等待加载完毕后再显示数据,我们可以给它加个loading动画,以下是收藏的一个动画效果供大家参考和使用<!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>loading</title> </head> <style> .loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); border-radius: 50%; animation: rotate 600ms infinite linear; } @keyframes rotate { to { transform: rotate(1turn) } } </style> <body> <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);"> <div class="loading__anim"></div> </div> </body> </html>
2024年08月22日
3 阅读
0 评论
0 点赞
1
...
57
58
59
...
68