html中动画纵向循环播放,CSS3实现的循环动画

最新推荐文章于 2023-07-20 15:46:47 发布
最新推荐文章于 2023-07-20 15:46:47 发布
阅读量425 收藏
点赞数
文章标签： html中动画纵向循环播放

CSS

语言：

CSSSCSS

确定

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

width: 100vw;

height: 100vh;

overflow: hidden;

background-color: #171723;

}

.canvas {

width: 500px;

height: 500px;

-webkit-perspective: 600px;

perspective: 600px;

}

@-webkit-keyframes hole-top {

0%, 15%, 100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@keyframes hole-top {

0%, 15%, 100% {

-webkit-transform: rotateX(80deg);

transform: rotateX(80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@-webkit-keyframes circle {

0%, 15%, 100% {

-webkit-transform: translate3d(-50%, -60%, 0);

transform: translate3d(-50%, -60%, 0);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: translate3d(-50%, 210%, 0) scale(0.75);

transform: translate3d(-50%, 210%, 0) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@keyframes circle {

0%, 15%, 100% {

-webkit-transform: translate3d(-50%, -60%, 0);

transform: translate3d(-50%, -60%, 0);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

30%,

85% {

-webkit-transform: translate3d(-50%, 210%, 0) scale(0.75);

transform: translate3d(-50%, 210%, 0) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

}

@-webkit-keyframes hole-bottom {

0%, 30%, 85%, 100% {

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45%,

70% {

-webkit-transform: rotateX(-80deg);

transform: rotateX(-80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@keyframes hole-bottom {

0%, 30%, 85%, 100% {

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45%,

70% {

-webkit-transform: rotateX(-80deg);

transform: rotateX(-80deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@-webkit-keyframes square {

0%, 30%, 85%, 100% {

border-radius: 50%;

-webkit-transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45% {

border-radius: 0px;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(360deg);

transform: translate3d(-50%, -40%, 0) rotate(360deg);

-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

}

70% {

border-radius: 35%;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(0deg);

transform: translate3d(-50%, -40%, 0) rotate(0deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

@keyframes square {

0%, 30%, 85%, 100% {

border-radius: 50%;

-webkit-transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

transform: translate3d(-50%, -310%, 0) rotate(0deg) scale(0.75);

-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

}

45% {

border-radius: 0px;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(360deg);

transform: translate3d(-50%, -40%, 0) rotate(360deg);

-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

}

70% {

border-radius: 35%;

-webkit-transform: translate3d(-50%, -40%, 0) rotate(0deg);

transform: translate3d(-50%, -40%, 0) rotate(0deg);

-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

}

.half {

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 50%;

overflow: hidden;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.half::before,

.half::after {

content: '';

display: block;

}

.half::before {

width: 250px;

height: 250px;

border-radius: 50%;

}

.half::after {

position: absolute;

top: 50%;

left: 50%;

width: 80px;

height: 80px;

}

.half:nth-child(1) {

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

}

.half:nth-child(1)::before {

background-color: aqua;

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: hole-top 3s infinite;

animation: hole-top 3s infinite;

}

.half:nth-child(1)::after {

border-radius: 50%;

background-color: gold;

-webkit-animation: circle 3s infinite;

animation: circle 3s infinite;

}

.half:nth-child(2)::before {

background-color: gold;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-animation: hole-bottom 3s infinite;

animation: hole-bottom 3s infinite;

}

.half:nth-child(2)::after {

background-color: tomato;

-webkit-animation: square 3s infinite;

animation: square 3s infinite;

}

weixin_39598796
关注
html图片闪现循环效果,CSS实现图片无缝无限循环展示效果
weixin_42512246的博客
06-03 1836
只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。先看实际效果：无限循环滚动的关键是确定宽图片的位置首先，这个图片的设计需要有一点技巧，就是它的首位部分是相同重复的，上面的演示里使用的图片是下面这幅：滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)，然后立刻将left值调整到最初的位置，开始下一次循环。我们...
利用CSS3制作动画(变形、过渡、动画)
Learn to value time
01-09 1575
CSS3变形 变形介绍 CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 CSS3变形是通过tranform实现的，可以用在块元素和行内元素上，该属性可以旋转、缩放、移动元素。 transform:[transform-function] *; 设置变形函数，可以是一个，也可以是多个，中间以空格分开。 变形函数 translate() 平移函数，基于X、Y坐标重新定位元素的位置
HTML5 Canvas+CSS3无限循环滚动叠纸背景动画特效
06-11
这是一款有创意的HTML5 Canvas+CSS3无限循环滚动叠纸背景动画特效，鼠标点击一下可以停止滚动，再次点击继续滚动，就像暂停播放效果。
html中动画纵向循环播放,CSS3连贯循环动画
weixin_42361237的博客
05-31 486
#loading span:nth-of-type(1){left: 0;-webkit-animation-name: animationloading1;}#loading span:nth-of-type(2){left: 20px;-webkit-animation-name: animationloading2;}#loading span:nth-of-type(3){left: 40...
HTML和CSS实现简易动画效果（循环播放）
qq_44376244的博客
06-08 2062
<!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...
HTML+CSS＞动画循环轮播图
站在巨人的肩膀上前行
04-15 3318
<!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>轮.
html 动画无限循环,CSS3动画 – 平滑无限循环
weixin_35950531的博客
06-07 870
我制作了一个小背景动画,其中div随着时间的推移会改变颜色.它工作顺利,但当它达到100％时,它会直接跳到0％而没有任何转换.我在google上搜索并尝试了不同的动画制作方式,但是如果动画我一直无法获得流畅的“重启”.我错过了什么？-webkit-animation: pulsate 20s infinite;animation: pulsate 20s infinite;-moz-animati...
用CSS3实现无限循环的无缝滚动的实例代码
09-24
CSS3中提供的一些关键特性如@keyframes、animation和transform，可以使滚动动画更加流畅和高效。 首先，我们来看一下实现无限循环滚动的基本思路。利用JavaScript进行滚动动画的实现，主要是通过克隆一份与原数据...
CSS3 动画卡顿解决方案
明月如霜丶
12-30 3976
为什么会卡顿？ 有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。 虽然说浏览器执行js是单线程执行（注意，是执行，并不是说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工作来渲染一个网页：主线程和合成线程。 一般情况下，主线程负责：运行 JavaScript；计算 HTML ...
css样式——垂直轮播
最新发布
qq_52695936的博客
07-20 508
card类的样式规则设置了宽度为430px，高度为100px，并设置了内边距为0 20px。.container类的样式规则设置了宽度为500px，高度为300px，并将position属性设置为relative。只是一个自定义属性，和CSS中的其他属性一样，你可以使用它来存储任何你想要的值，并在样式规则中引用它。子元素的宽度为90px，高度为90px，并设置了其position属性为absolute，意味着。关键帧，元素的不透明度为1，没有上下平移，保持原位置，缩放为原来的大小。
HTML5立体小球运动动画效果.zip
07-04
HTML5立体小球运动动画效果是一款利用canvas实现的3d立体空间内小球的运动。
html制作循环动画语句,纯css制作块动画SASS循环
weixin_39781186的博客
06-07 151
*{box-sizing: border-box;}html{height: 100%;}body{width: 100%;height: 100%;background-color: #a584f4;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: c...
html制作循环动画语句,写多个物件css3循环动画案例原理_html/css_WEB-ITnose
weixin_31546795的博客
06-07 349
在写h5页面中，我们可能经常遇到要写很多css3动画，有没有同学遇到多个物件同样的动画效果，循环保存步调一致呢，我就经常碰到，之前一直不知道其中的原理，只是简单的迁移改改，可是遇到稍微复杂多一点的就hold不住了，只能硬着头皮去分析其中的原理。那么接下来，让我们先看看案例，然后了解之中的原理css3动画循环案例案例一：loading动画效果html代码：css样式:案例二：圆形放大或缩小的load...
html鼠标滑过播放动画,css3鼠标滑过动画
weixin_32568425的博客
06-04 345
本实例共有五个鼠标滑过的动画效果，但其实原理都是差不多。第一个是多加了一个空白的标签，来显示那个遮罩的三角形；第二，三，四都是对却是用border来生成的遮罩，至于第五个效果就比较复杂，不过原理都是一样的，实际应用也不需要那么复杂。所以只需把前面四个简单的学会了，第五个就当做欣赏吧，扩大自己的视野，以后举一反三的机会多的是。说到底，transition的动画变换来变换去，都是那么几个属性，关键在于...
html5图片无限循环播放,原生js实现无限循环轮播图效果
weixin_36448199的博客
06-04 3701
知识要点1.实现无限循环的原理：以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量list.style.left=newLeft+"px";//当前的偏移值=新的偏移值//以偏移的距离来判断是否跳回第一张和最后一张if(newLeft&gt...
html制作滚动游戏,纯htmlcss实现一个炫酷的无限滚动动效
weixin_39997696的博客
05-31 271
1. 先看需求某次迭代中接到的需求是做一个无限滚动的斜滑模块，如下图所示，一定数量游戏icon源源不断的从右上方滑出，循环往复。可以先看看下方的实现效果~(因为图片大小问题，只截取了一部分。实际效果是一直滚动，不会有动画复位的割裂感。)2. 问题拆分看到这个需求的时候，感觉有点复杂，icon错位排列，斜着滚动，无限滚动...后来考虑了下，对这个问题进行了下面步骤的拆分：编写各个容器及icon等基本...
html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)
weixin_36255893的博客
06-09 900
我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –body {padding: 0;margin: 0;}.outer, ...
html 添加加载动画,「HTML+CSS」--自定义加载动画【026】
weixin_36331312的博客
06-09 999
效果展示Demo代码HTMLDocumentCSShtml,body{margin: 0;height: 100%;}body{display: flex;justify-content: center;align-items: center;background: #263238;}section {width: 650px;height: 300px;padding: 10px;positio...
使用html5和css3动画制作网页轮播图效果
weixin_63689594的博客
08-31 1585
动画常用属性 轮播图的制作，html css3 3D动画 轮播图动画制作 ，@keyframes的使用，动画的使用，动画序列和效果展示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值