一些乱七八糟的CSS知识点笔记（持续更新中~）_element.style.backgroundimage = keyframes-优快云博客

本文深入探讨了使用JavaScript和CSS3创建动态图像和动画的方法。介绍了如何通过JavaScript改变元素样式实现动画效果，如创建移动、切换图像和呼吸灯效果。同时，详细阐述了CSS3的动画属性，包括关键帧、过渡效果、渐变和3D变换，以及如何通过DOM操作和CSS动画API实现更复杂的动态效果。文章还提到了浏览器适配和各种动画属性的使用技巧，如transform、animation和transition。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS动画

创建动画容器

所有动画都应该与容器元素关联。

应该通过 style = “position: relative” 创建容器元素。

应该通过 style = “position: absolute” 创建动画元素。

为元素添加样式

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);//定时器，5毫秒1px
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

使用 JavaScript 创建动态图像是可行的。

窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。

onMouseOver

事件的作用是告知浏览器：一旦鼠标悬浮于图像之上，浏览器就会执行某个函数，这个函数会把这副图像替换为另一幅。

onMouseOut

事件的作用是告知浏览器：一旦鼠标离开图像，浏览器就要执行另一个函数，这个函数会重新插入原来的那幅图像。

<html>
<head>
</head>

<body>
    <a href="http://www.w3school.com.cn" target="_blank">
    <img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
    onmouseOver="mouseOver()"
    onmouseOut="mouseOut()" />
    </a>
    //为图像添加name属性可以直接找到
    <script type="text/javascript">
        function mouseOver(){
          document.b1.src ="/i/eg_mouse.jpg"
          }
        function mouseOut(){
          document.b1.src ="/i/eg_mouse2.jpg"
          }
    </script>
</body>
</html>

呼吸灯

<style>
    .play {
        width: 200px;
        height: 200px;
        position: relative;
    }

    .play::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: red;
        margin: 30px 0 0 30px;
        animation: breathing 1s linear infinite alternate;
    }

    @keyframes breathing {
        0% {
            transform: scale(.5);
        }

        100% {
            transform: scale(1);
        }
    }
</style>

transform 过渡效果

css3中将容器变形或变换，例如平移、倾斜、缩放、矩阵变换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hd5OorjY-1632919748353)(css3.assets/image-20210830201428222.png)]

浏览器适配
旋转div元素
div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
}

xyz轴，产生平移是在轴上移动

属性表

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。使用px平移容器，百分比是按照容器大小来移动容器
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。x y的比例来放大缩小
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

https://www.runoob.com/cssref/css3-pr-transform.html

基本思路：三层结构：视角容器>>载体>>具体3d图像。

视角容器：决定3d的呈现效果，这里的pespective属性接收参数为像素，perspective的值越大，代表“眼睛离观察物越远”，值越小，代表“眼睛越靠近观察物”。

scale(x,y)

对元素进行缩放。X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。

scaleX(n)

元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点。同理，scaleY(n) 元素只在Y轴（垂直方向）缩放元素。

元素移动translate(120px)

元素倾斜skew(10deg),deg代表"度"

元素旋转rotate(10deg),按顺时针旋转，没有X、Y轴；

animate api

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCehsgyB-1632919748356)(css3.assets/image-20210830201733042.png)]

dom.animate(
    [
        {
            // 起始css属性
        },
        {
            // 结束css属性
        }
    ],
    {
        duration: 1000 //完成动画的时间
    }
)

var div = document.getElementsByTagName('div')[0];
div.animate(
    [
        {
            backgroundColor: "red"
        },
        {
            backgroundColor: "orange"
        },
        {
            backgroundColor: "blue"
        }
    ],
    {
        duration: 1000 //完成动画的时间
    }
)

CSS3动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	按照百分比四种播放的方向
animation-duration	规定动画完成一个周期的时间。
animation-fill-mode	规定元素在播放之前之后动画样式
animation-iteration-count	规定动画应该运行的次数。（infinite持续运行）
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

@keyframes

浏览器动画效果的不同名称

实例
使 div 元素匀速向下移动：

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

animation-direction 属性：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（100%-> 0%）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

animation-timing-function 属性：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

animation-fill-mode 属性：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

transition过渡效果

浏览器适配

div{
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
}

element.style {
	margin-top : 100px;
	margin-left : 100px;
	transition : margin-left 1s linear;//准确指定哪个属性变化
}

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的某个CSS 属性名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-timing-function

过渡效果的速度曲线

值	描述
linear	匀速开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

获取窗口的宽高—offset、scroll、client

offset系列:获取元素的宽,高,left,top, offsetParent

offsetWidth:元素的宽,有边框

offsetHeight:元素的高,有边框

offsetLeft:元素距离左边位置的值

offsetTop:元素距离上面位置的值

scroll系列:卷曲出去的值

scrollLeft:向左卷曲出去的距离

scrollTop:向上卷曲出去的距离

scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框

scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

client系列:可视区域

clientWidth:可视区域的宽(没有边框),边框内部的宽度

clientHeight:可视区域的高(没有边框),边框内部的高度

clientLeft:左边边框的宽度

clientTop :上面的边框的宽度

快捷生成标签：

用 >创建父子结构标签，生成子元素
用+创建兄弟标签，生成同级元素
用.或者#创建类标签id
用[]来创建属性标签
用{}在标签的内容
用$来实现编号
用@n来修改起始值(例如修改$ div.content$@3*3)

Element.getBoundingClientRect()

**Element.getBoundingClientRect()** 方法返回元素的大小及其相对于视口的位置。

如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

CSS3渐变

线性渐变linear-gradient

默认从上到下

background: linear-gradient(direction方向,#e66465, #9198e5)

从左到右 to right

 background:linear-gradient(to top,pink,DeepSkyBlue);
 background:linear-gradient(to left,pink,DeepSkyBlue);

对角 to bottom right(左上角到右下角)

角度渐变

从下到上默认为0deg，角度变化看箭头方向来渲染颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehHMF0yb-1632919748359)(css3.assets/image-20210922151138285.png)]

background: linear-gradient(-90deg,#e66465, #9198e5)

透明度来过渡

透明度（transparent），可用于创建减弱变淡的效果。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
 background:linear-gradient(rgba(255,182,193,0.7),rgba(0,191,255,0.7));

重复线性渐变

repeating-linear-gradient

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变（中心向外）radial-gradient

渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

默认是中心向外均匀分布

background: radial-gradient(red, yellow, green);
//百分比不均匀
background: radial-gradient(red 5%, yellow 15%, green 60%);

四个关于渐变半径的关键字

关键字 closest-side/closest-corner/farthest-side/farthest-corner ,这个取决于圆心的位置,圆心的位置表示前面要加at。

closest-sid取圆心距离边框最近的的距离作为渐变的半径
farthest-side取圆心位置距离边框最长的距离作为渐变的半径
closest-corne取圆心位置距离最短的角的距离作为渐变的半径
farthest-corner取圆心位置距离最长的角的距离作为渐变的半径

background: radial-gradient(closest-side circle at 40%, pink, Deepskyblue);

重复的径向渐变

background: repeating-radial-gradient(pink 10%,Deepskyblue 20%);

3D球

border-radius: 50%;
background: radial-gradient(200px circle at 50px 50px ,rgba(0,191,255,0.1),rgba(0,191,255,0.9));
box-shadow: 2px 2px 5px 1px deepskyblue;

设置纯色像素点

//使用像素点设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);
//设置百分比
 background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);

圆锥渐变conic-gradient

起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。

链接：https://www.imooc.com/article/27841

.cir{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}

hsl() 被定义为色相-饱和度-明度（Hue-saturation-lightness）

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。

这里，我们通过改变色相得到一个较为明亮完整的颜色色系。

采用这样一个过渡 hsl(0%, 100%, 50%) --> hsl(100%, 100%, 50%)，中间只改变色相，生成 20 个过渡状态。借助 SCSS ，CSS 语法如下:

$colors: ();
$totalStops:20;
  
@for $i from 0 through $totalStops{
    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}
  
.colors {
    width: 200px;
    height: 200px;
    background: conic-gradient($colors);
    border-radius: 50%;
}

vertical-align

需要与line-height搭配来用，需要有行内距才可以设置文字在垂直方向上的位置，使用middle属性可以达到文字居中的目的。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。