-
CSS3实现类似翻书效果的过渡动画的示例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：81
副标题#e# 在VUE实战项目的中有一个加载推荐书籍的过渡动画，在项目中是使用JS实现。 当时看视频大概一个小时作用，拆分动画逻辑，写代码更是耗时。后来自己想着能不能用CSS动画直接写出来，折腾了半天，终于算是实现了。 可以查看加载动画地址 /*首先是DOM[详细]
-
css自定义占位文本(placeholder)的样式的方法示例
所属栏目：[站长百科] 日期：2020-05-13 热度：112
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML input placeholder=我是红色的[详细]
-
详解CSS3 弹性布局快速入门
所属栏目：[站长百科] 日期：2020-05-13 热度：74
弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局[详细]
-
CSS揭秘之多重边框的实现
所属栏目：[站长百科] 日期：2020-05-13 热度：55
多重边框的两种实现方案： border-shadow outline !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA-Compatible content=ie=edgetitleMutiple border/title/headbo[详细]
-
CSS八等分圆的实现示例
所属栏目：[站长百科] 日期：2020-05-13 热度：142
对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮[详细]
-
CSS开关按钮样式详解
所属栏目：[站长百科] 日期：2020-05-13 热度：76
副标题#e# 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或[详细]
-
css中子元素设置margin-top为什么影响了父元素
所属栏目：[站长百科] 日期：2020-05-13 热度：176
style type=text/css*{margin: 0px; padding: 0px;}.show{margin: 0px auto;width: 200px;height: 100px;background-color: #999999;}.show h2{margin-top: 50px;cursor: pointer;}/stylebodydiv class=showh2crystal/h2/div/body 两个div，子元素div设置[详细]
-
解决display:flex属性 justify-content: space-between换行后的排版问题
所属栏目：[站长百科] 日期：2020-05-13 热度：200
display:flex属性 justify-content: space-between换行后的排版问题 style.wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐，子元素之间有间隙*/flex-flow: row wrap;/*子元素溢出父容器时换行*[详细]
-
纯css实现动态边框的示例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：148
副标题#e# 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添[详细]
-
详解CSS Masking模块之Clipping
所属栏目：[站长百科] 日期：2020-05-13 热度：134
副标题#e# 最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask 和 clip-path 来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于 mask 的相关特性理解的还[详细]
-
移动端rem布局的两种实现方法
所属栏目：[站长百科] 日期：2020-05-13 热度：146
据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一[详细]
-
CSS 常用中文字体 Unicode 编码表
所属栏目：[站长百科] 日期：2020-05-13 热度：84
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。 为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 例如： font-f[详细]
-
css3 响应式媒体查询的示例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：93
/* 将body的背景颜色设置为tan */body { background-color: tan;}/* 在992px或更低的屏幕上，将背景颜色设置为蓝色 */@media screen and (max-width: 992px) { body {background-color: blue; }}/* 在600px或更低的屏幕上，将背景颜色设置为橄榄色 */@medi[详细]
-
CSS3动画之利用requestAnimationFrame触发重新播放功能
所属栏目：[站长百科] 日期：2020-05-13 热度：168
css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画，对一些不怎么会JS的设计师也是比较包容的。但也正因为如此，当你需要重新播放或者说手动触发动画时，css的局限性就突显出来了，毕竟它不是一门编程语[详细]
-
CSS背景图片实现自适应、全屏、填充与拉伸的方法
所属栏目：[站长百科] 日期：2020-05-13 热度：84
div id=formbackground style=position:absolute; width:100%; height:100%; z-index:-1 img src=http://www.jb51.net/css/pictures/background.jpg height=100% width=100%/ /div div id=formbackground style=position:absolute; z-index:-1;img src=htt[详细]
-
浅谈CSS 浏览器样式重置终结版
所属栏目：[站长百科] 日期：2020-05-13 热度：154
副标题#e# 浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：54
这里以制作图片右上角标签为例，用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div（一个父容器，一个标签div），分别设置宽高，并设置相对布局。 使标签div居于父容器右上角，设置内容居中显示，设置背景和字体颜色，旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目：[站长百科] 日期：2020-05-13 热度：189
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；[详细]
-
使用css创建一个优惠券的方法
所属栏目：[站长百科] 日期：2020-05-13 热度：97
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
使用CSS 给表单必选项添加星号的实现方法
所属栏目：[站长百科] 日期：2020-05-13 热度：144
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单： p class=form-grouplabel for=author姓名/label span class=required*/spaninput type=text id=author name=author required=required size=30 class=f[详细]
-
搭建websocket消息推送服务,必须要考虑的几个问题
所属栏目：[站长百科] 日期：2020-05-12 热度：159
副标题#e# 近年，不论是正在快速增长的直播，远程教育以及IM聊天场景，还是在常规企业级系统中用到的系统提醒，对websocket的需求越来越大，对websocket的要求也越来越高。从早期对websocket的应用仅限于少部分功能和IM等特殊场景，逐步发展为追求支持高并[详细]
-
Linux/Ubuntu Git从安装到使用的方法步骤
所属栏目：[站长百科] 日期：2020-05-12 热度：188
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 一.叙述 1.说明：需要在Windows 安装Git的同学，可以查看该篇博客https://www.jb51.net/softjc/711624.html相对Windows来说，Ubuntu安装使用Git就很简单了。 2.Git的两大特点 版本[详细]
-
Jar包一键重启的Shell脚本及新服务器部署的一些经验分享
所属栏目：[站长百科] 日期：2020-05-12 热度：130
最近公司为客户重新部署了一套新环境，由我来完成了基础环境的配置，配置过程中总结了一些经验，分享给各位园友 使用 curl 命令检查网络 拿到新服务器后，首先检查服务器网络是否通畅。我们常用的 ping 命令使用的是 ICMP 协议，大部分服务器都设置了域名[详细]
-
完全卸载VSCode--解决卸载重新安装后还有原来配置的问题(图解)
所属栏目：[站长百科] 日期：2020-05-12 热度：110
VSCode卸载后进行重新安装，发现新安装的还有原来的一些配置，卸载的不彻底，有时候也容易出问题，可按照如下方法卸载干净： 1.进入控制面板卸载VSCode，也可以在VSCode的安装目录下用程序自带的卸载程序（这个没有亲自试过.....） 2.这样卸载完后还有一些[详细]
-
详解Idea 2020 找不到或无法安装官方汉化包解决方案
所属栏目：[站长百科] 日期：2020-05-12 热度：138
Idea 2020 发布之后，官方终于支持了中文语言包 但是，我下载后在插件市场无法找到官方的汉化包 那要怎么解决这个问题呢？ 首先，查看你当前Idea的Bulid版本 然后去官网下载离线汉化语言包，下载链接 可以看到一堆的版本号，这里要注意下，目前官方的最新[详细]
