程序员经验分享-hwhale

【CSS3高级应用】

2023-10-30

一、页面中的多媒体嵌入

网页除了可以放置图片和文字，还可以放置音频和视频。

1、视频：

标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。

(1)视频格式
<video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video>

    .mp4：mpeg-4(视频标准)
	
	.WebM
	
	.Ogg

(2)属性如下：

  • src：视频文件的网址。
  • controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。
  • width：视频播放器的宽度，单位像素。
  • height：视频播放器的高度，单位像素。
  • autoplay：视频是否自动播放，该属性为布尔属性。
  • loop：视频是否循环播放，该属性为布尔属性。
  • muted：是否默认静音，该属性为布尔属性。
  • poster：视频播放器的封面图片的 URL。
  • preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none(不缓冲)、metadata(仅仅缓冲视频文件的元数据)、auto(可以缓冲整个文件)。
  • playsinline：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。
  • crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous(跨域请求时，不发送用户凭证，主要是 Cookie)，use-credentials(跨域时发送用户凭证)。

2、音频：

标签是一个块级元素，用于放置音频，用法与video标签基本一致。

（1）音频格式
<audio src=“音频文件名” controls muted autoplay loop></audio>

    .mp3 : mpeg-3(音频文件标准)
	
	.wav  
	
	.ogg

（2）属性如下：

  • src：音频文件网址。

  • autoplay：是否自动播放，布尔属性。

  • loop：是否循环播放，布尔属性。

  • muted：是否静音，布尔属性。

  • controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。

  • crossorigin：是否使用跨域方式请求。

  • preload：音频文件的缓冲设置。

二、CSS3中过渡效果（transition)

从一个样式变化到另一个样式
1、transition-property：指定过渡的属性，取值如下：

     none：没有属性取得过渡效果
	 
	 all : 所有属性都有过渡效果
	 
	 property：具体属性名获得过渡效果

2、transition-duration：过渡效果所花费的时间，默认值为0

     秒：单位是s
	 
	 毫秒：单位是ms

小练习：
①代码段如下：

<style>
div{
    width:400px;
    height:200px;
    background-color:red;
}
div:hover{
    background-color:blue;
    transition-property:background-color;/*指定那个属性获得过渡效果。*/
    transition-duration: 5s;/*指定过度效果完成所需的时间。*/
}
</style>
<body>
   <div></div>
</body>

②过渡效果展示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3、transition-timing-function：过渡的速度曲线，取值如下：

属性值 含义
linear： 以相同的速度从开始到结束。等同于cubic-bezier(0,0,1,1)
ease： 默认值。由慢到快,然后再到慢的效果
ease-in 由慢开始，逐渐加快.即淡入效果
ease-out： 由慢结束.即淡出效果
ease-in-out： 淡入、淡出效果
cubic-bezier(n,n,n,n) 由函数实现

插入一个曲线图便与理解：
在这里插入图片描述

小练习：
①代码段展示：

<style>
 .demo{
     width: 424px;
     height:424px;
     background: url('../images/cd_img.jpg');
     border:5px solid #333;
     border-radius: 0px;
 }   
 .demo:hover{
     border-radius: 50%;
     transition-property: border-radius;
     transition-duration: 3s;
     transition-timing-function: ease-in-out;
 }
</style>
<body>
    <div class="demo"></div>
</body>

②过渡效果展示：
在这里插入图片描述在这里插入图片描述在这里插入图片描述4、transition-delay：规定过渡效果何时开始，可以设置 延迟触发时间。默认是 0，鼠标触发就立即开始。
5、综合写法：transition：用于在一个属性中设置四个过渡属性。

transition:要过渡的属性 花费时间 运动曲线 何时开始

①代码块如下：

<style>
      div {
        width: 200px;
        height: 100px;
        background-color: pink;
        /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
        /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 
        过渡写到本身上，谁做动画，给谁加*/
        transition: all 0.6s ease 0s;           
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

            width: 600px;
            height: 300px
}

</style>
<body> 
 <div></div>
</body>

②效果展示：
在这里插入图片描述在这里插入图片描述

三、CSS3中变形效果(transform)

1.平移：本质是重新定义元素的坐标

(1)transform: translate(x-value,y-value); 表示x轴、y轴同时平移
(2)transform: translateX(150px); 表示x轴的平移.等价于transform: translate(150px);
(3)transform: translateY(150px); 表示Y轴平移。
(4)transform:translate(150px);第二个值被省略的话，默认为0。

示例：
①代码如下：

<!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>盒子的平移</title>
</head>
<style>
    div{
        width: 100px;
        height: 50px;
        background-color: aqua;
        color: aliceblue;
    }
    #div2{
         transform: translate(100px,30px);/*盒子2相对于盒子1的相对位移 ,X轴Y轴同时平移*/
         /* transform: translateX(100px); 表示X轴的平移*/
         /* transform: translateY(30px);表示y轴的平移 */
    }  
</style>
<body>
    <div>盒子1没有平移</div>
    <div id="div2">盒子2有平移</div>  
</body>
</html>

②页面展示：
在这里插入图片描述
2、旋转：可以让元素在一个坐标系统中变形

● transform:rotate(angle);用于指定元素围绕默认基准点（50%，50%）旋转,参数angle表示旋转的角度值,正数表示顺时针旋转,负数表示逆时针旋转。
●transform:rotateX(a)函数用于指定元素围绕X轴旋转。
解释说明：参数a用于定义旋转的角度值，单位为deg,其值可以是正数也可以是负数。如果值为正,元素将围绕X轴顺时针旋转;反之，如果值为负，元素围绕X轴逆时针旋转。
●transform:rotateY(a);
参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转;反之,如果值为负，元素围绕Y轴逆时针旋转。
●transform:rotateZ(a);
参数a与rotateX(a)，rotateY(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Z轴顺时针旋转;反之,如果值为负，元素围绕Z轴逆时针旋转。
●rotate3D ()方法
在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有个rotate3d()函数。
●rotate3d(x,y,z,angle);x、y、z可以取值0或1,当要沿着某一轴转动，就将该轴的值设置为1,否则设置为0。Angle为要旋转的角度。

①代码如下：

<!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>旋转</title>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        background-color: aqua;
        margin: 100px;
    }
     #div1:hover{/* 当鼠标悬停时 */
        transition: all 1s ease-in-out;
        transform: rotate(-90deg);
    }
</style>
<body>
    <div id="div1">盒子旋转的元素</div>  
</body>
</html>

②页面展示：
旋转前：
在这里插入图片描述
旋转后：
在这里插入图片描述
3、缩放：本质是改变元素的大小。(改变元素宽度和高度的缩放比例)

(1)transform:scale(x-axis,y-axis);参数表示宽度和高度的缩放比例,可以是正数、负数和小数, 若是负数，则先让元素反转，然后进行缩放
transform: scale(2,3); 参数2表示原宽度的2倍(即200%),参数3表示原高度的3倍(即300%)
transform: scale(2);若省略第二个参数,则第二个参数值和第一个参数值相同
(2)transform: scaleX(2);只缩放宽度
(3)transform: scaleY(2);只缩放高度

①代码展示：

<!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>缩放</title>
    <!-- 参数表示宽度和高度的缩放比例，可以是正数，也可以是负数和小数，为负数的话文字进行旋转，在进行缩放。 -->
</head>
<style>
    div{
        width: 100px;
        height: 50px;
        background-color: chartreuse;
        border:1px solid black; 
    }
    #div2{
        margin: 100px;
        transform: scale(2,3);/*参数2表示原宽度的2倍，参数三表示原高度的三倍。*/
        /* transform:scale(2);若省略第二个参数，则第二个参数和第一个参数值相同，不为默认值0 */
        /* transform:scaleX(2); */
        /* transform: scaleY(3); */
    }
</style>
<body>
    <div>盒子1没有缩放</div>
    <div id="div2">盒子2 有缩放</div>
</body>
</html>

②页面展示：
在这里插入图片描述
4、倾斜：改变元素倾斜的角度

(1)transform:skew(x-angle,y-angle);两个参数分别表示x轴和y轴的倾斜角度。角度的单位是deg, 如果第二个参数省略,默认值为0
(2)transform:skewX(x-angle);沿x轴倾斜
(3)transform:skewY(y-angle);沿y轴倾斜

①代码展示：

<!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>倾斜</title>
    <!-- 改变元素倾斜的角度 -->
</head>
<style>
div{
    width:100px ;
    height:50px;
    background-color: red;
    border: 1px solid black;

}
.div2{
    margin: 100px;
    transform: skew(-30deg ,-10deg);
    /* transform: skew(30deg,10deg); */
    /* transform: skewX(30deg); */
    /* transform: skewY(10deg); */
}
</style>
<body>
    <div>盒子1没有倾斜</div>
    <div class="div2">盒子2有倾斜</div>
</body>
</html>

②页面展示：
在这里插入图片描述
5、中心点：元素变形的基准点,若要改变这个基准点，通过以下属性实现

transform-origin: x-axis y-axis z-axis; 三个参数的默认值为50% 50% 0
x-axis: left center right length %
y-axis: top center bottom lengh %
z-axis: length

①代码展示：

<!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>基准点的变形</title>
    <!-- 基准点默认值为50% 50% 0;也就是说X轴和Y轴的一般，Z轴为0，是个二维空间 -->
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        background-color: aqua;
        margin: 200px;
    }

    #div2:hover{
        transform-origin:left center 0;/*改变基准点*/
        transform:rotate(-90deg);
    }
</style>
<body>
    <div id="div2">中心点</div>    
</body>
</html>

②页面展示：
中心点变形之前：
在这里插入图片描述

中心点变形之后：
在这里插入图片描述

四、CSS3的动画效果（animation）

1、创建动画：@keyframes

> @keyframes  animation-name{
	 keyframes-selector: {
		 css-styles
		}
	 }

animationname:表示当前动画的名称，它将作为弓|用时的唯一标识，因此不能为空。
keyframes-selector：关键帧选择器。(可以是百分比、from、to，表示在指定关键帧时动画的位置)
css-styles:定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

注：from和0%等价，表示动画开始的关键帧

注：to和100%等价,表示动画结束的关键帧

2、应用动画：animation

  • animation-name：keyframename| none;（动画名称）
    animation-name属性初始值为none,适翻于所有块元素和行内元素keyframename参数用于 规定需要绑定到选择器的keyframe的名称，如果值为none,则表示环应用任何动画,通常用于覆盖或者取消动画。
  • animation-timing-function：动画方式(动画完成的速度曲线),可以定义使用哪种方式执行效果。
    animation-timing-function包括linear、ease-in、 ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。
属性值 描述
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier（n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是0到1的数值。
  • animation-delay：执行动画效果之前延迟的时间(规定动画什么时候开始)
    参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性 适用于所有的块玩素和行内元素。
  • animation-iteration-count：动画的播放次数(参数可以是数字和infinite)
    animation-iteration-count属性初始值为1,适用于所有的块元素和行内元素。如果属性值为number,则用于定义播放动画的次数;如果是infinite,则指定动画循环播放。
  • animation-duration：time;用于定义整个动画效果完成所需要的时间，以秒或毫秒计。
    animation-duration属性初始值为0,适翻于所有块元素和行内元素。time参数是以秒(s)或者毫秒(ms)为单位的时间，默认值为0,表示没有任何动画效果。当值为负数时，则被视为0。
    animation-direction：normal| alternate;(动画播放的方向)
    animation- direction属性初始值为normal, 适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是" alternate",则动画会在奇数次数(1、3、5等等)正常播放，而在偶数次数(2、 4、6等)逆向播放。
  • animation: 动画名称 动画方式 循环播放 完成时间; 复合定义(综合写法）
    示例1:
    ①代码展示：
<!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>动画</title>
</head>
<style>
    img{
        width:200px;
        animation-name: mymove;
        animation-duration: 10s;
    }
    @keyframes mymove{     /*@keyframes关键帧 mymove动画名称*/
        from{transform: translate(0) rotateY(180deg);}
        50%{transform: translate(1000px) rotateY(180deg);}
        51%{transform: translate(1000px) rotateY(0deg);}
        to{transform: translate(0) rotateY(0deg);}
    }
    
</style>

<body>
  <img src="../images/people.gif">  
</body>
</html>

②页面动画效果：
请添加图片描述示例2：
①代码展示：

<!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>
<style>
div{
    width: 200px;
    height:150px;
    margin:40px;
    border-radius: 50%;
    background: #F60;
    animation-name: mymove;  /* 定义动画名称 */
    animation-duration: 8s;/* 定义动画时间*/
    animation-iteration-count: 2;/* 定义动画次数 */
    animation-direction: alternate;/* 定义动画方向 */
}
@keyframes mymove{
    from{transform: translate(0) rotate(0deg);}  /*rotate(0deg);作用使其效果为3d椭圆*/
    to{transform:translate(1000px) rotateZ(1080deg);}
}
</style>
<body>
    <div></div>
</body>
</html>

②页面动画效果：
请添加图片描述示例3：
①代码展示：

<!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>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 2px solid #000;
        position: relative;
        transition: all 1s ease 0s;/*设置过渡效果*/
        transform-style: preserve-3d;/*保存嵌套元素的3D空间*/
    }
    img{
        position: absolute;
        top: 0;
        left: 0;
        transform: translateZ(100px);
    }
    .no2{
        transform:rotateX(90deg) translateZ(100px);
    }
    div:hover{
        transform: rotateX(-90deg);/*设置旋转角度*/
    }
</style>
<body>
    <div>
    <img class="no1" src="../images/1.png">
    <img class="no2" src="../images/2.png">
    </div>
</body>
</html>

②动画效果展示：
请添加图片描述

五、CSS3的滤镜效果(Filters)

1、模糊效果(高斯模糊)：blur(value);参数value表示模糊半径

2、图像的亮度：brightness(value);参数表示图像的亮度。可以是百分比，也可以是正数值 。0%表示全黑图像,100%和1表示原图

3、调整图像对比度：contrast(value);参数表示图像的对比度。可以是百分比，也可以是正数值。 0%表示全黑图像,100%和1表示原图

4、图像阴影：drop-shadow(x,y,r,c);类似于box-shadow属性.参数x和y表示阴影在水平和垂直方向的偏移量。 参数r表示阴影半径,参数c表示阴影颜色

5、将图像转为灰度：grayscale(value);参数可以是百分比和正数。100%表示全部灰度,0%表示不变

6、反转效果：invert(value); 参数是百分比或正数。100%和1表示完全反转,0%表示不变

7、图像透明度：opacity(value);参数是百分比或正数。100%和1表示不变,0%表示完全透明

8、棕褐色效果：sepia(value);参数是百分比或正数.100%和表示深褐色。0%表示不变

9、饱和度：saturate(value); 0%表示不饱和
①代码展示：

<!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>
<style>
    img{
        /*-webkit-filter: blur(5px);webkit表示浏览器内核效果（wekit表示谷歌内核）*/
       /* filter: blur(2px);参数表示模糊半径，值越大越模糊*/
       filter: brightness(120%);/*参数表示图像的亮度,值越大越亮*/
       width: 500px;
       height: 300px;
    }
    /* 对比度 */
    #t1{
        width: 500px;
        height: 300px;
        filter: contrast(150%);
    }
    /* 阴影效果，前两个值表示水平和垂直方向的偏移量，第三个值表示阴影半径，第四个值表示阴影颜色 */
    #t2{
        width: 500px;
        height:300px;
        border-radius: 50%;
        filter: drop-shadow(4px 4px 10px orange );
    }
    /* 灰度效果 */
    #t3{
        width: 500px;
        height: 300px;
        filter: grayscale(150%);
    }
    /* 反转效果，1和100%表示完全反转，0%表示不变 */
    #t4{
        filter: invert(100%);
    }
    /* 透明度,值越小越透明，默认值1和100%为完全不透明，就是不变 */
    #t5{
        filter: opacity(40%);
    }
    /* 棕褐色效果，百分比越大，棕褐色效果越明显 */
    #t6{
        filter: sepia(80%);
    }
    /* 图片饱和度，0%表示不饱和*/
    #t7{
        filter: saturate(80%);
    }

</style>
<body>
   <img src="../images/3.jpg"> 
   <img src="../images/4.png" id="t1">
   <img src="../images/5.png" id="t2">
   <img src="../images/6.png" id="t3">
   <img src="../images/7.png" id="t4">
   <img src="../images/8.png" id="t5">
   <img src="../images/9.png" id="t6">
   <img src="../images/11.png" id="t7">
</body>
</html>

②页面效果展示：
在这里插入图片描述

六、CSS3精灵技术（sprite）

小知识：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
    在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
    所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个次数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

CSS Sprites的使用：

  • background-image、
  • background-repeat
    repeat控制的平铺规则有：
属性值 解释
repeat-x 横向平铺；
repeat-y 纵向平铺；
repeat 横向平铺和纵向平铺（默认值）；
no-repeat 不平铺；（也就是说图片只出现一次）
round 背景图像自动缩放直到适应且填充满整个容器或某个方向。（CSS3）
space 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
  • background-position属性进行背景定位，
    其中最关键的是使用background-position 属性精确地定位,用来设置背景图像起始位置的CSS样式属性，背景图像如果要重复，将从这一点开始。

制作精灵图遵循原则:

  1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
  2. 精灵图的宽度取决于最宽的那个背景
  3. 可以横向摆放也可以纵向

示例：

#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
　　　　
#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
　　　　
#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
　　　　
.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
当然也有简写方法：
#ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}
其中，X坐标和Y坐标表示原图相对于ico1框左上角点的偏移量，即 坐标 0 0表示背景图和ico1框的左上角点重合

例如：背景图像是图片"bg_sprite.png"
在这里插入图片描述代码：

ico { 
width: 16px;
height:16px;
background: url("bg_sprite.png") no-repeat 0 -234px;
}

效果：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html5

【CSS3高级应用】 的相关文章

  • 如何将transform-origin与SVG结合使用？ [复制]

    这个问题在这里已经有答案了 我正在尝试旋转SVG path从它的中心但它不工作 a width 40px height 40px width 40px font size 1 5rem padding 1px overflow hidden

  • 柔性端和端部的区别？ [复制]

    这个问题在这里已经有答案了 当我使用 css 属性时align items 我看不出与值有任何视觉差异flex end或值end 有什么区别align items end and align items flex end 一个值 end 在

  • 如何防止移动浏览器调整文本大小

    如何使文本在移动设备上的显示方式与在桌面设备上的显示方式相同 浅粉色区域中的文本在桌面和移动设备上是相同的 这正是我在 推荐 部分 以及许多其他领域 需要实现的目标 谢谢 Desktop view Mobile view CSS testi

  • jQuery 验证插件错误 CSS

    我想在错误时将标签字体颜色更改为红色或将文本框元素着色为红色 我使用的 CSS 不适合我 并且不确定如何更改单选 文本框的标签 而不是如果验证插件添加的标签错误 HTML

  • 填充重叠的圆形区域

    我有两个相交的圆 我想让相交区域具有颜色 即使这两个圆是透明的 我想我可以找到一些方法用 css 来做到这一点mix blend mode财产 但我没有成功 当然 我可以使圆圈具有颜色并降低其不透明度 但我希望它们是白色或透明的 其中只有重

  • 如何为 p 标签中的星号第一个字符着色

    我认为这会很容易使用 first letter伪元素 但它不起作用 I have p Required Fields p 我希望 是红色的 有任何想法吗 请注意 我无法更改 html http jsfiddle net 3ducS http

  • 尝试制作Linux终端但失败

    这可能是一个愚蠢的问题 可能很容易找到 但我对这一切都很陌生 我似乎找不到我要找的东西 或者至少我不知道我需要寻找什么 所以我在这里 所以我想做的是创建一种 Linux 终端 这就是我到目前为止所得到的 我所坚持的是实际输入文本部分 我一直

  • 如何消除页面边缘的间隙？

    我已经将主体和两个 div 的边框 内边距和边距设置为 0px 但我似乎仍然无法摆脱差距 body padding 0px border 0px margin 0px width 100 height 100vh mainPage heig

  • 如何选择与绝对定位 DIV 重叠的选项？

    我有一个绝对定位的 div 它的作用类似于工具提示 当鼠标悬停在某个元素上时 它会显示 然后在鼠标移开时隐藏 我有几个

  • CSS 特异性还是继承？

    我在这里看过类似的问题 但没有找到适合我的情况的问题 如果我正确地阅读了这篇文章 http css tricks com specials on css specificity http css tricks com specifics o

  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎

  • 删除多个类 (jQuery)

    有没有更好的方法来重写这个 element removeClass class1 removeClass class2 我无法使用removeClass 因为它会删除我不想要的所有课程 element removeClass class1

  • 在 IE7 中水平对齐 div，无垂直堆叠

    我有一个固定容器 里面有一个附加容器 其中根据用户选择容纳了许多 DIV 我需要这些额外的 DIV 水平排列并提供水平滚动 但不是垂直滚动 比如这样 x x x 本质上 我的设置如下所示 div div div class final im

  • 自定义标签...为什么不呢？

    我找到了一个网站 其中包含向 html 添加自定义标签的指南 就像人们让 ie 使用新的 HTML5 标签一样 我必须承认 我认为添加我自己的标签会很棒 这样可以更轻松地 扫描 代码并找到您要查找的内容 但我发现的每个网站 人们都说它不好

  • flex-basis 示例：内容

    我注意到在弹性盒规格 https www w3 org TR 2016 CR css flexbox 1 20160301 that flex basis可以设置为content 我正在尝试在 html 中使用它 但它在 Chrome 中不

  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入

  • 如何并排展开和折叠三个div？

    document ready function toggle click function if this data name show sidebar animate width 10 hide map animate width 89

  • 使用 JS 从列表中删除最近的 元素的 URL

    所以我有一个网址列表 并且有删除按钮 图像按钮 当点击删除按钮时 按钮旁边的 url 必须从列表中删除 let list const remove document getElementById remove const view docu

  • 无法使用 CSS 将宽度和高度应用于 -webkit-scrollbar

    webkit scrollbar width 5px height 5px webkit scrollbar thumb background color 808080 为什么宽度和高度属性不起作用 width用于垂直滚动条和height影

  • CSS3 Marquee / Ticker 动画最后没有空格

    我正在用 2 个项目集合构建字幕 旋转木马效果 循环两者item collection跨越translateX并不难 这里是小提琴 http jsfiddle net k1k3h2p0 但我不喜欢每个循环末尾的空白区域 知道两个集合的宽度可

随机推荐

热门标签