Css3动画

关于css3动画:CSS-实例系列-02-2023-兔年祝福

Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~ 新年新气象，让咱们耍一个兔飞猛进的祝愿吧：这个是一个残缺的线上小实例，小伙伴们能够填写数据，服务器会用 Node.js 定期读取数据：填写数据：https://kdocs.cn/l/cbmawranzvNL成果查看：https://liangjunrong.github.io/例如你填的用户名称是：abab，那么你的链接就是：https://liangjunrong.github.io?username=abab本期将和小伙伴们探讨： [x] 如何通过 HTML + 海量 CSS + 简略 JS，实现这个兔年祝愿实例[x] 如何通过 Node.js，开启无头浏览器读取「金山文档」的数据，同步到 GitHub Page 上本实例的代码地址： Demo —— all for one码上掘金 - 02 - 2023 兔年祝愿一前言本 CSS 系列文章：主推学以致用。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。主推纯 CSS。尽可能应用 HTML + CSS 实现学习目标，但依然有 “一小部分” 性能须要用到 JavaScript 常识，适宜新人学习 + 大佬温习。如果文章在一些细节上没写分明或者误导读者，欢送评论/吐槽/批评，你的点赞、珍藏和关注是我更新的能源 ❤ 更多常识分享文章可见：jsliang 的文档库二前端实现本实例的一些创意，参考自 Jamie Juviler 提供的 24 个 CSS 动画，从中失去启发创作了这封信，在此示意非常感谢： 24 Creative and Unique CSS Animation Examples to Inspire Your Own参考成果： ...

关于css3动画:探究几种CSS视差动画实现方案及原理

滚动视差介绍视差滚动（Parallax Scrolling）是指多层背景以不同的速度挪动，造成平面的静止成果，带来十分杰出的视觉体验。实现原理形式一：利用 background-attachment 属性，咱们能够把网页解刨成：背景层、内容层、悬浮层 background-attachment 的作用是设置背景图像随着页面滚动的时候固定，即便一个元素有滚动机制，背景也不会随着元素的内容而滚动，它的值有以下三个： Scroll：默认值，背景图像会随着页面其余部分的滚动而挪动。fixed：当页面的其余部分滚动时，背景图像不会挪动。inherit：继承父元素 background-attachment 属性的值。此实现形式可参考形式二：配合应用 transform 和 perspective 利用3D视图空间实现物体静止的速度差从而来实现视觉差成果。原理如下: transform: 能够对元素进行变换(2d/3d)，包含平移 translate，旋转 rotate，缩放 scale，等等。 perspective : 当元素波及 3d 变换时，它能够定义咱们眼睛看到的 3d 平面成果，即空间感。留神：当设置 translateZ 后，须要通过 scale 放大或者放大元素来让元素达到肉眼所见的物体没被被放大放大的感觉，计算 scale 的公式如下： scale = ((translateZ * (-1)) / perspective) + 1经典案例利用background-attachment经典案例这是一款名为Olija的游戏的网站，这是对于一个挥动着鱼叉的英雄摸索友好土地以找到回家的路的故事。游戏有两个外围方面，首先是它的视觉流动性，其像素艺术中的像素尺寸相当大，因而如果不看到它的动静，就很难传播这款游戏的美感；第二个外围方面是它的故事。感觉就像游戏是依据已有的书籍或电视剧改编的。该网站的指标是抓住这两个外围方面，并吸引用户与之互动；让他们感觉本人是故事的一部分，并让他们感觉能够管制口头。实战视差动画demo-01<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> section { height: 100vh; background: rgba(0, 0, 0, .7); color: #fff; display: flex; justify-content: center; align-items: center; font-size: 20vh; } .img1 { background-image: url(https://qnm.xxx.com/Fkx77YvvfwdODmMvNVv_IaQx42wT); background-attachment: fixed; background-size: cover; background-position: center center; } .img2 { background-image: url(https://qnm.xxx.com/Fjh7nb4J7JonMOgGfbxXQU0WNRS0); background-attachment: fixed; background-size: cover; background-position: center center; } .img3 { background-image: url(https://qnm.xxx.com/lhXcD2QvakkntJVZMzyI2xiwEgic); background-attachment: fixed; background-size: cover; background-position: center center; } </style> </head> <body> <section class="text">1</section> <section class="img1">2</section> <section class="text">3</section> <section class="img2">4</section> <section class="text">5</section> <section class="img3">6</section> <section class="text">7</section> </body></html> ...

关于css3动画:css实现一个简单的-闪烁效果

纯css闪动成果demo具体速度和色彩本人能够本人调 <div class="father-box"> <div class="header-box"> </div> </div>@keyframes test { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; }}@-webkit-keyframes test { from { opacity: 1.0; } 50% { opacity: 0.4; } to { opacity: 1.0; }}.father-box { position: relative;}.header-box { color: #fff; padding: 10px; font-size: 15px; height: 300px; background-color: rgba(146, 139, 139, .8); animation: test 1000ms infinite; -webkit-animation: test 1000ms infinite;}成果

关于css3动画:10个css实现特效

打字成果阐明：通过 steps() 属性来实现宰割文本的成果。首先，你必须指定 step() 中传入的数量，在这个例子中就是文本的长度。接着，第二步，咱们应用 @keyframes 去申明什么时候开始执行动画 <div class="typing"> <div class="typing-effect">Typing effect for text</div></div>.typing { height: 80vh; display: flex; align-items: center; justify-content: center;}.typing-effect { width: 22ch; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; animation: typing 2s steps(22), effect .5s step-end infinite alternate;}@keyframes typing { from { width: 0; }}@keyframes effect { 50% { border-color: transparent; }}通明图片暗影成果阐明：应用：drop-shadow drop-shadow 的工作形式是，其遵循给给定图片的 Alpha 通道。因而暗影是基于图片的外部形态，而不是显示在图片里面。 <div class="transparent-shadow"> <div class="margin-right"> <div class="margin-bottom align-center"> box-shadow </div> <img class="box-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="box-shadow example (transparent)"> </div> <div> <div class="margin-bottom align-center"> drop-shadow </div> <img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)"> </div></div>.transparent-shadow { height: 80vh; display: flex; align-items: center; justify-content: center;}.margin-right { margin-right: 2em;}.margin-bottom { margin-bottom: 1em;}.align-center { text-align: center;}.box-shadow { box-shadow: 2px 4px 8px #3723a1;}.drop-shadow { filter: drop-shadow(2px 4px 8px #3723a1);}自定义 Cursor ...

关于css3动画:纯CSS实现lineargradient的渐变动画效果

话不多说，先上效果图受制于网站的容量，最多只能上传4MB的动图，所以我调快了动画的速度，缩短了动图的工夫，实际上动画是很弛缓的。说到动画，家喻户晓，突变是不可能应用通过keyframes实现动画过渡成果的，只会忽然的扭转色彩。例如，如果关键帧代码如下 @keyframes test { 0%{ background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%); } 100%{ background: linear-gradient(60deg, rgb(173, 162, 218) 0%, rgb(201, 14, 189) 100%); }} 能够看到背景色并不会平滑的过渡，只会十分生硬忽然的色彩变动，显然不是咱们想要的成果。换个想法，没必要局限于在keyframes中应用linear-gradient来实现突变动画成果，linear-gradient不可能平滑过渡，然而position能够呀，所以咱们先实现这样的成果 html代码如下 <div class="header"> <div class="inner-header flex"> <svg version="1.1" class="logo" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve"> <path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" /> <g> <path fill="#fff" d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4 C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1 c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7 c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2 c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z" /> </g> </svg> </div> <div> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> </g> </svg> </div></div>css代码如下 ...

关于css3动画:CSS3CSS3动画我离前端的炫酷又近了一步

【CSS3】CSS3动画——我离前端的炫酷又近了一步博客阐明文章所波及的局部材料来自互联网整顿，当然还有本人集体的总结和认识，分享的目标在于共建社区和坚固本人。援用的材料如有侵权，请分割自己删除！幸好我在，感激你来！阐明CSS3 可实现 HTML 元素的动画成果，而不应用 JavaScript 或 Flash。为了学习前端的动效，我几乎是不折伎俩。目前就抓着CSS的动画来搞一波。什么是动画⭕老规矩，问句结尾。在须要变动的工夫节点上指定一些关键帧，关键帧就是此刻所定义的款式。例如我在1s左移5m，3s左一15m，这时就有两个关键帧，因为这两个关键帧，画面就产生了位移，那么动画也就产生了。上面这句话总结到位：动画使元素逐步从一种款式变为另一种款式。 CSS3的动画次要依赖@keyframes和animation来实现。 @keyframes和animation的浏览器反对 @keyframes 规定@keyframes 规定是创立动画。 @keyframes 规定内指定一个 CSS 款式和动画将逐渐从目前的款式更改为新的款式。 @keyframes myfirst{ from {background: red;} to {background: yellow;}}以上的就是一个简略的动画，关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的实现。也就是从红色变成黄色。为了失去最佳的浏览器反对，应用 0% 和 100% 选择器是最好的抉择。animationanimation既然动画的关键帧都有了，那么就须要把这个关键帧落实并绑定到某个DOM上。语法能够一起写，也能够离开写属性。 animation: name duration timing-function delay iteration-count direction fill-mode play-state;animation-name指定要绑定到选择器的关键帧的名称语法 animation-name: keyframename|none;// keyframename 指定要绑定到选择器的关键帧的名称animation-duration动画指定须要多少秒或毫秒实现语法 animation-duration: time;// time 指定动画播放实现破费的工夫。animation-timing-function指定动画将如何实现一个周期语法 animation-timing-function: value;动画函数 linear 动画从头到尾的速度是雷同的。ease 默认。动画以低速开始，而后放慢，在完结前变慢。ease-in 动画以低速开始ease-out 动画以低速完结。ease-in-out 动画以低速开始和完结。steps(int,start|end）指定了工夫函数中的距离数量（步长）。 ...

关于css3动画:CSS进阶

CSS_进阶1. 动画1) 实现步骤1. 定义动画帧 @keyframes 动画名{ from { // 开始帧 } to { // 完结帧 } } @keyframes 动画名{ 0% { // 开始帧 } 20% { } ... 100% { // 完结帧 } }2. 设定动画（贺卡） animation-name: move; 动画名 animation-duration: 2s; 持续时间 animation-timing-function: linear; 工夫曲线函数（自由落体，贝塞尔曲线） animation-fill-mode:forwards; 填充模式，动画完结后保留哪一帧规定 animation-iteration-count: 2; 动画迭代次数 infinite animation-direction: alternate-reverse; 动画执行的方向 from->to , to->from animation-play-state: paused; 动画状态 animation-delay: 1s; 延迟时间 animation: move 2s 1s 2 linear; 动画的速写模式2) 案例（呼吸灯）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hi</title> <style> *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container{ width:226px; height: 330px; background: #343434; margin:0 auto ; } .circles{ padding: 36px;/*动画*/ height: 226px; animation-name:wobble; animation-duration: 4.4s; /*9s*/ animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; } .circles > .outer{ height: 100%; border:5px solid #9b9b9b; padding: 10px;/*动画*/ border-radius:50%; border-radius:50%; animation-name:outer_wobble; animation-duration: 4.4s; /*9s*/ animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; } .circles > .outer > .inner{ height: 100%; border:15px solid #ffffff; border-radius:50%; border-radius:50%; } @keyframes outer_wobble { 20% { padding: 20px; } 40% { padding:10px; } 65%{ padding:22px; } 100%{ padding: 10px; } } @keyframes wobble { 20% { padding: 26px; } 40% { padding:36px; } 100%{ padding:36px; } } .text{ font-size: 22px; color: #ffffff; text-align: center; } </style></head><body> <div class="container"> <div class="circles">  <div class="outer">  <div class="inner"> </div> </div> </div> <div class="text"> HI! </div> </div></body></html>3) 案例（梦幻西游）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>梦幻西游</title> <link rel="stylesheet" href="../common.css"> <style> html { color: #333; font:normal 12px '微软雅黑','Microsoft YaHei'; } body,ul,ol,p,h1,h2,h3 { margin: 0; padding: 0; } ul,ol { list-style: none; } a { text-decoration: none; color: #333; } .content { width: 950px; position: absolute; left: 50%; margin-left: -475px; bottom: 300px; } .content > ul::after { display: block; content: ""; clear: both; } .content > ul > li { float: left; width: 200px; height: 180px; margin-right: 50px; overflow: hidden; } .content > ul > li:last-child { margin-right: 0; } .content > ul > li > div { width: 1600px; height: 180px; animation-name: dong; animation-duration: 1s; animation-timing-function: steps(8); animation-iteration-count: infinite; /*animation-direction: reverse;*/ } .content > ul > li > div img { width: 100%; } /*定义动画*/ @keyframes dong { from { margin-left: 0; } to { margin-left: -1600px; } } html,body,.main { height: 100%; } .main { width: 100%; overflow-x: hidden; } .main > .bg { width: 3920px; height: 100%; margin-left: -1920px; background-image: url('./images/bg.jpg'); background-repeat: repeat-x; animation-name: bg; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes bg { from { margin-left: -1920px } to { margin-left: 0; } } </style></head><body> <div class="main"> <div class="bg"></div> </div>  <div class="content"> <ul> <li> <div><img src="./images/wk.png" alt=""></div> </li> <li> <div><img src="./images/bj.png" alt=""></div> </li> <li> <div><img src="./images/ts.png" alt=""></div> </li> <li> <div><img src="./images/ss.png" alt=""></div> </li> </ul> </div></body></html>2. 动画库 animate.css动画帧、动画设定规定都有第三方实现，咱们间接应用class即可 ...