当前位置：首页 > news >正文

CSS3+动画

news 文章来源：https://blog.csdn.net/qq_38332722/article/details/143504600 2025/5/16 22:43:34

浏览器内核以及其前缀

css标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所有会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近的推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟了，不用加前缀。
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种。
（1）Gecko内核：前缀-moz。火狐浏览器。
（2）Webkit内核：前缀-webkit。chrome、safari。
（3）Trident内核：前缀-ms-。IE。
（4）Presto内核：前缀-o-。opera。

box-shadow

box-shadow:阴影1，阴影2，…
box-shadow:0px 0px 0px 0px #fff inset,0px 0px 0px 0px #fff inset;
box-shadow:水平偏移垂直偏移模糊度阴影大小颜色内侧阴影
在这里插入图片描述

变换 transform2D

transform 2D函数：translate(x,y)-移动、scale-缩放、rotate-旋转、skew-扭曲
matrix(a,b,c,d,e,f)-矩阵变换
参数a和d：控制元素的缩放。
参数b和c：控制元素的倾斜或斜切。
参数e和f：控制元素的平移。

格式：transform 函数

transform-origin：指定rotate旋转的中心点位置/scale缩放的基点/skew（默认是图形中心点）。
transform-origin:center;
transform-origin:top left;
transform-origin:50px 50px;
transform-origin:bottom right 60px;

变换 transform3D

transform 3D函数：
translate3d(x,y,z)、translateX(x)、translateY(Y)、translateZ(z)；
scale3d(x,y,z)、scaleX(x)、scaleY(Y)、scaleZ(z)；
rotate3d(x,y,z)、rotateX(x)、rotateY(Y)、rotateZ(z)；

格式：transfrom 3d函数

perspective:透视：视角距离：视角离显示屏的距离。
perspectice-origin：视角位置。

过渡 transition

格式：transition:property duration timing-function delay
transition:all 0.3s linear 1s;

缓动函数timing-function:缓动函数有三类：
（1）贝塞尔缓动函数：cubic-bezier(x1,y1,x2,y2)。下面是四个预定义的贝塞尔函数。
ease:
（2）线性缓动函数：linear(<point-list>)
在这里插入图片描述
（3）阶跃缓动函数：steps(<number-of-steps>,<direction>)

动画 animation

通过关键帧控制动画，关键帧之间的过渡效果。
animation属性

@keyframes 规定动画，用于指定关键帧。。
animation 所有动画属性的简写属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite无限循环。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。alternate先执行一遍动画，然后再反向执行一遍动画。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

动画案例

小球弹跳动画

.boll{width:500px;height:500px;background:#29d1d1;border-radius:50%; animation:bounce 1s linear infinite;
} 
@keyframes bounce{0%{transform:translateY(0%);}50%{transform:translateY(25%);}100%{transform:translateY(0%);}
}

文字渐变动画效果

.text-animation{width:140px;height:70px;font-size:90px;font-weight:bold;line-height:50px;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);color:transparent;background-clip:text; animation: gradient 2.5s ease infinite alternate;background-position:0% 100%;background-size:400% 400%;
}
@keyframes gradient{0%{background-position:0% 100%;} 100%{background-position:100% 100%;}
}

地图图标动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="content"><div class="pos"></div><div class="pos-bottom"></div></div></body>
<style>body {background-color: #0b3061;overflow: hidden;}.content {width: 100%;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;}.pos {width: 100px;height: 100px;background-color: #0c5db9;border-radius: 50% 50% 50% 0;transform: rotate(-45deg);animation-name: bounce;animation-duration: 1s;animation-timing-function: ease;animation-fill-mode: both;}.pos::after {content: '';display: inline-block;width: 50px;height: 50px;border-radius: 50%;background-color: #fff;position: relative;top: 25%;left: 25%;}.pos-bottom { width: 50px;height: 50px;background-color: rgba(0, 0, 0, 0.2);border-radius: 50%; transform: rotateX(55deg);  z-index: -1; }.pos-bottom::after {content: '';display: inline-block;width: 100px;height: 100px;background-color: transparent; border-radius: 50%;transform: rotateX(30deg); position: relative;bottom: 50%;right: 50%;box-shadow: 0px 0px 2px 5px rgba(255, 255, 255, 0.5);animation-name: pulsate;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 1.1s; opacity: 0;}@keyframes bounce {0% {opacity: 0;filter: alpha(opacity=0);transform: translateY(-1000px) rotate(-45deg);}60% {opacity: 1;filter: none;transform: translateY(30px) rotate(-45deg);}100% { transform: translateY(0px) rotate(-45deg);}}@keyframes pulsate {0% { transform: scale(0.2);opacity: 0;} 50% { opacity: 1;}100% {transform: scale(1); opacity: 0;}}
</style></html>

背景混合动效

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="container"><div class="card"><div class="bg-1"></div><div class="bg-2"></div><div class="icon-box"></div></div><div class="card"><div class="bg-1"></div><div class="bg-2"></div><div class="icon-box"></div></div><div class="card"><div class="bg-1"></div><div class="bg-2"></div><div class="icon-box"></div></div></div></body>
<style>:root {--color: rgb(61, 98, 112);--color-bg-1: #33adff;--color-bg-2: #ff2af4;}body {background: linear-gradient(45deg, rgba(42, 199, 219, 0.973), rgba(255, 122, 151, 0.5));width: 100vw;height: 100vh;display: flex;flex-direction: row;justify-content: center;align-items: center;overflow: hidden;}.container {width: 95vw;max-width: 600px;display: flex;flex-wrap: wrap;text-align: center;position: relative;}.card {flex: auto;min-width: calc(33% - 2vw);margin: 0 1vw calc(1vw + 50px) 1vw;position: relative;cursor: pointer;border: 1px solid #fff;}.card:hover .bg-1,.card:hover .bg-2 {display: block;}.card::after {content: '';float: left;padding-top: 100%;}.icon-box{position: absolute;width: 85%;height: 85%;border-radius: 50%;background-color: #fff;margin: 8%;}.bg-1,.bg-2{position: absolute;width: 85%;height: 85%;border-radius: 50%;   opacity: 1;mix-blend-mode: multiply;display: none;}.bg-1{background-color: var(--color-bg-1); animation: move 1.8s linear infinite  ;}.bg-2{background-color: var(--color-bg-2);    animation: move 1.2s linear infinite  ;}@keyframes move {0%{top:8%;left:0%;}25%{top:0%;left:8%;}50%{top: 8%;left: 16%;}70%{top: 16%;left: 8%;} 100%{top: 8%;left: 0%;}} 
</style></html>

渐变动态边框

1、通过背景旋转rotate得到

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="container"><div class="box"><h2>CSS</h2></div><div class="box"><h2>Border</h2></div><div class="box"><h2>Animation</h2></div></div>
</body>
<style>body {padding: 0;margin: 0;}.container {width: 100%;height: 100vh;display: flex;justify-content: space-between;align-items: center;background-color: #0e1538;}.box {width: 300px;height: 400px;margin: 30px;border-radius: 20px;background-color: rgba(0, 0, 0, .5);position: relative;display: flex;align-items: center;justify-content: center;color: #fff;box-shadow: 0 0 10px #000;overflow: hidden; h2{z-index: 1;}}.box::before {content: '';position: absolute;width: 150px;height: 140%;background: linear-gradient(#00ccff,#d400d4);box-shadow: 0 0 20px #999;animation: animate 4s linear infinite; }.box::after{content: '';position: absolute;inset: 4px;background-color: #0e1538;border-radius: 16px;}@keyframes animate {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
</style></html>

2、动态渐变边框：放大背景，修改背景位置可以得到图片各位置的图像。
background-size: 200% 100%;
background-position: 0 0;//看到左边部分的渐变
background-position: 100% 0;//看到右边部分的渐变

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="container"><div class="input"><input class="input-inner" type="text" placeholder="Enter your name"></input></div></div>
</body>
<style>body {padding: 0;margin: 0;}.container {width: 100%;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;background-color: #000;}.input {position: relative;}.input::before {content: '';position: absolute;width: 100%;height: 100%;border-radius: 5px;background: linear-gradient(to right, yellow, green, #00ccff, #d400d4);/* 横向放大2倍，可视区域只能看到两个颜色的渐变 */background-size: 200% 100%;animation: input-border 2s ease-in-out infinite;animation-direction: alternate-reverse;}.input-inner {position: relative;display: inline-block;margin: 10px;width: 400px;height: 50px;z-index: 1;}@keyframes input-border {0% {background-position: 0 0;}100% {background-position: 100% 0;}}
</style></html>

文本变形动画

文本变形：filter contrast() blur()
animation-delay 负数提前执行：动画提前执行，重叠在页面上的元素希望他们一次出现，可以设置提前执行。这样在元素还没有显示在页面上时就开始执行动画。
元素居中：

 left: 50%;top: 50%;//相对父元素的偏移transform: translate(-50%, -50%);//相对自身往反方向偏移一半就居住中了

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="morphing"><div class="word">word</div><div class="word">morphing</div><div class="word">with</div><div class="word">pure</div><div class="word">CSS</div><div class="word">is</div><div class="word">greet!!</div></div>
</body>
<style>body {padding: 0;margin: 0;}.morphing {width: 100%;height: 100vh; background:  #000;color: #fff;position: relative;/*  contrast(25) 和 动画中的 blur 配合使用，可以达到 圆角的效果 */filter: contrast(25) blur(1px);}.word {font-size: 120px;position: absolute;/*居中*/left: 50%;top: 50%;transform: translate(-50%, -50%);animation: word 16s ease-in-out infinite; /* 可以设置为0，让延迟为正数 *//*opacity: 0;animation: word 14s ease infinite; */}/* animation-delay 负数 提前执行 */.word:nth-child(1)  {animation-delay: -16s;}.word:nth-child(2) {animation-delay: -14s;} .word:nth-child(3) {animation-delay: -12s;} .word:nth-child(4) {animation-delay: -10s;} .word:nth-child(5) {animation-delay: -8s;} .word:nth-child(6) {animation-delay: -6s;}.word:nth-child(7) {animation-delay: -4s;}  /* .word:nth-child(1)  {animation-delay: 1s;}.word:nth-child(2) {animation-delay: 3s;} .word:nth-child(3) {animation-delay: 5s;} .word:nth-child(4) {animation-delay: 7s;} .word:nth-child(5) {animation-delay: 9s;} .word:nth-child(6) {animation-delay: 11s;}.word:nth-child(7) {animation-delay: 13s;}   */@keyframes word {0%,5%,100% {opacity: 1;filter: blur(0px);}20%,80% {opacity: 0;filter: blur(1em);}}
</style></html>

平面移动动画

transform: translateX：从屏幕左边移到右边
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="container"><div class="plane plane-1"><i></i></div><div class="plane plane-2"><i></i></div></div>
</body>
<style>body {padding: 0;margin: 0;}.container {width: 100%;height: 100vh;overflow: hidden;position: relative;}.container::after {content: '';position: absolute;width: 100%;height: 100%;background-image: linear-gradient(360deg, #b7bca4 26.23%, #3d94b2 87.3%);top: 0;left: 0;opacity: 0.4;}.plane {position: absolute;left: 0;width: 100%;z-index: 1;transform: rotate(-10deg);}.plane i {background-image: url("./plane.png");background-repeat: no-repeat;background-position: right center;background-size: contain;position: absolute;right: 0;transition: all 0.4s ease-out; animation: motion linear infinite;  }.plane-1 {top: 90px;}.plane-1 i {width: 1171px;height: 67px;animation-duration: 50s;animation-delay: -10s;}.plane-2 {top: 200px;}.plane-2 i {width: 500px;height: 47px;animation-duration: 60s;animation-delay: -5s;}@keyframes motion{0%{opacity: 1;transform: translateX(-120vw);}100%{/* opacity: 0; */transform: translateX(0);}/* 97%{ opacity: 1;}98%{ opacity: 0;} *//* 100%{ opacity: 0;transform: translateX(calc(0% + 100px));} */}
</style></html>

鼠标光标动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="container"><div class="box box-1">Sphere</div><div class="box box-2">Circle Outline</div><div class="box box-3">Circle Pin</div><div class="box box-4">Circle Color Gradient</div><div id="circle"></div></div>
</body>
<script>let circle = document.getElementById("circle");const circleStyle = circle.style;document.addEventListener("mousemove", (e) => {window.requestAnimationFrame(() => {circleStyle.left = `${e.clientX - circle.offsetWidth / 2}px`;circleStyle.top = `${e.clientY - circle.offsetHeight / 2}px`; })  })</script>
<style>body {padding: 0;margin: 0;cursor: none;}.container {width: 100%;height: 100vh;padding: 100px;box-sizing: border-box;overflow: hidden;position: relative;background-color: #359095;}#circle {width: 30px;height: 30px;border-radius: 50%;background-color: #fff;pointer-events: none;position: absolute;transition: background ease-in 10ms ,box-shadow ease-in 150ms,transform ease-in 150ms;transform: translate3d(0,0,0);}.box {width: 70%;height: 25%;margin: 0 auto;display: flex;align-items: center;justify-content: center;}.box-1 {background-color: #e8edf3; }.box-1:hover ~ #circle{background-color: #e6cf8b;box-shadow: 0 0 0 0 transparent,inset 0em -0.3em 0.4em 0.2em #ca9e03a6;}.box-2 {background-color: #e6cf8b;}.box-2:hover ~ #circle{background-color: transparent;border: 3px solid #b56969; }.box-3 {background-color: #b56969;}.box-3:hover ~ #circle{background-color: pink; transform: scale(0.5);}.box-4 {background-color: #1d1f31;color: #fff;}.box-4:hover ~ #circle{background-image: linear-gradient(to top, #fbc2eb, #a6c1ee); }
</style></html>

浏览器内核以及其前缀

box-shadow

变换 transform2D

变换 transform3D

过渡 transition

动画 animation

动画案例

小球弹跳动画

文字渐变动画效果

地图图标动画

背景混合动效

渐变动态边框

文本变形动画

平面移动动画

鼠标光标动画

相关文章：