背景变色<div class="button"><span>hover me to change</span></div>
.button {
margin:40px auto;
width:200px;
height:60px;
padding:0 30px;
......
578
0
0
2024-02-10
实现网站全页面快速置灰，可以使用一个 css 属性，加到 html 标签上，即可快速实现filter: grayscale(100%);
-webkit-filter: grayscale(100%); //兼容chrome和safari
-moz-filter: grayscale(100%); //兼容Firefox
-ms-
......
464
0
0
2023-01-08
原效果：实现效果：代码：<div> 打败苹果，十年巨亏，全球在线音乐第一股的转型之痛</div>
<style>
div{
width: 200px;
white-space: nowrap; /* 文本不换行 */
overflow: hidden;
......
477
0
0
2022-10-14
一个悬停效果简单来说可以定义为在颜色，产生的效果文字的大小或形状或任何其他形式的变化发生，当你把鼠标光标移动到图像。这可以通过CSS编码容易实现。这里我们介绍国外8个CSS库添加图像悬停效果，提高网站的交互性。1、Aero CSS3 Hover Effects（悬浮css效果）这是一个令人印象深刻的，重量轻，响应图像悬停效果。完全由纯CSS3的动力。2.Im
......
582
0
0
2022-09-26
大家好，今天跟大家分享的是CSS3动态日记翻页效果的实现方法，老规矩，先看效果翻开效果闭合效果接下来讲解具体操作步骤，相信观看过小编前几期教程的同学应该对CSS3的“rotate”属性都不陌生，在轮播图那期我们已经初步体验来它的效果，这一期主要用到的还是这个旋转属性。1、HTML结构：最外层的div(.book)主要用来调控日记本在页面的位置和添加一些立体效
......
601
0
0
2022-07-18
animate第一步，先上效果图animate第二步，直接上代码简单粗暴，其实css很简单，主要就是定位和层级自行理解哈，若有疑问可去142991222找小姐姐我
......
492
0
0
2022-07-17
css选择器相信大家都不陌生，每一个前端小伙伴从一开始接触前端就已经和它密不可分，今天我们就来整理一下css选择器的知识：严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器，ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。CSS选择器效率从高到低的排序如下：1.id选择器（#myid）2.类选择器（.myclassname
......
505
0
0
2022-07-12
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家先来看个效果吧：我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果就像是photoshop整出来的一样，其实是真是这样的，有很多效果都是类似于photos
......
587
0
0
2022-06-14
在做网页的时候经常要实现一些类似于标签的标识，这时很多人会使用图片去实现，当然这是一种做法，还有另外一种做法就是利用CSS3的属性来实现该效果！下面看看效果图：要实现该效果原理就是右边定位一个三角形，然后下面的夹角也是定位一个小三角形就可以实现如图所描述的效果！下面来看看简要的代码：html:主要CSS：主要通过css伪类来添加2个三角形的效果，实现标签效果
......
541
0
0
2022-06-08
鼠标放在图片上时，图片自动移动，到尽头后，反向移动首先我们给的图片尺寸：3320*1352先将图片放在一个300*200的div盒子中HTML结构：先将图片作为背景图：定义一个动画，设置动画效果：使用动画效果，设置动画状态为暂停：鼠标移入后，动画开始：效果图:
......
763
0
0
2022-05-11
在前端开发中，文章列表算是很常见的了，但是有很多时候，做列表开发也很无奈，比如当某条文章标题很长的时候，而我们的列表因为宽度有限，导致文章标题显示不完整，就像这样：文章效果html代码大家可以看到，列表中的标题都显示的不完整，这样的显示效果并不友好，用户无法知道这个标题是否是完整的，那么这个时候我们就可以给他改进一下，如果标题太长，就给它显示省略号，这样用户
......
448
0
0
2022-05-02
在上篇文章中，我做了个单行文本溢出显示省略号的实例，今天应各位网友的要求，写个多行文本溢出显示省略号的实例。通过上篇文章的实例，大家都知道，单行溢出显示省略号也就一行代码的事，但是要实现多行文本溢出显示省略号那就有些难度了，为什么这么说呢，做前端开发的网友都知道，每个浏览器不一样，所以兼容性很难做到完美，那今天我就把我知道的几种方法写出来跟大家分享。第一种方
......
534
0
0
2022-05-02
做过网页的朋友对 placeholder 这个属性应该不会陌生，这个是表单输入框的提示信息属性，就像这样：当输入框为空的时候就显示这个提示语，让用户知道这里要填写什么内容，从上面的图中可以看到，这个提示语默认是灰色，平时我们也不会怎么去设置这个东西，因为默认的色就可以了，不需要再改了，那么如果设计师的创意比较另类，这个提示他换成了别的色，那我们要怎么改呢？其
......
470
0
0
2022-05-02
最近遇到了一个效果：实现个数不等的中文对齐或等宽，于是整理了一下，包括自己搜索到的以及同事提供的方法。实现方法如下所示：实现方法一：最简单的方法就是用空格：空格：半角空格 半个中文字符  一个中文字符  2字/3字/4字实现效果如下：有时文字之间的距离并不能正好用空格实现，可以采用以下三种方法，其中第二
......
501
0
0
2022-04-30
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。你可能已经熟悉媒体查询media query了。它们被广泛地用于使网站具有响应性。width 和 height 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。prefers-color-scheme 媒体查询 的工作方式与此相
......
507
0
0
2022-04-28