css3动画魔方无限滚动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>*,ul,li {margin: 0;padding: 0;}li {margin: 0;}.box {width: 300px;height: 300px;position: relative;/* 开启3d */transform-style: preserve-3d;margin: 200px auto;animation: dong 10s;/* infinite 无限循环 */animation-iteration-count: infinite;/* linear 匀速 */animation-timing-function: linear;}li {list-style: none;display: inline-block;width: 90px;height: 90px;border-radius: 20px;text-align: center;line-height: 90px;background-color: #ccc;font-size: 40px;font-weight: 700;margin: 5px 2px;}ul {width: 300px;height: 300px;padding-left: 5px;position: absolute;}.qian li {background: red;}.qian {transform: translateZ(150px);/* 向眼睛 位移150px */}.hou li {background: blue;}.hou {transform: translateZ(-150px);/* 向眼睛 位移-150px */}.zuo li {background: deepskyblue;}.zuo {transform: translateX(-150px) rotateY(90deg);/* 向左边位移150px 沿着y轴转90度 */}.you li {background: pink;}.you {transform: translateX(150px) rotateY(-90deg);/* 向右边位移150px 沿着y轴转90度 */}.shang li {background: yellow;}.shang {transform: translateY(-150px) rotateX(90deg);}.xia li {background: orange;}.xia {transform: translateY(150px) rotateX(-90deg);}.box {transform: rotateY(45deg) rotateX(45deg);}@keyframes dong {0% {transform: rotateX(0deg) rotateY(120deg);}10% {transform: rotateX(30deg) rotateY(30deg);}20% {transform: rotateX(60deg) rotateY(90deg);}30% {transform: rotateX(90deg) rotateY(10deg);}40% {transform: rotateX(120deg) rotateY(150deg);}60% {transform: rotateX(130deg) rotateY(200deg);}70% {transform: rotateX(180deg) rotateY(260deg);}80% {transform: rotateX(190deg) rotateY(160deg);}90% {transform: rotateX(140deg) rotateY(90deg);}100% {transform: rotateX(120deg) rotateY(120deg);}}</style>
</head><body><div class="box"><ul class="qian"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="hou"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="zuo"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="you"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="shang"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><ul class="xia"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>
</body></html>

css3动画魔方无限滚动相关推荐

CSS3动画实现背景滚动
在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好. 现在就是要利用CSS3来实现一张图片的无穷滚动. 首先了解一下CSS3的动画属性: ①.ani ...
CSS3实现列表无限滚动/轮播
使用CSS3实现列表的无限滚动/轮播效果预览思路将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项问题点用什么方式实现无限轮播这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...
Android中ViewPager支持一屏多个View、切换动画以及无限滚动
1. 首先看一下最终的效果图 2. 需求拆解第一眼看见上面的效果,是不是有些朋友觉得这个效果很酷,有的高手会觉得这个效果很简单.笔者昨天刚拿到需求的时候,最开始也是觉得这个很简单,可是越分析越发现好 ...
使用CSS3动画实现文字滚动
以前实现文字滚动经常使用marquee标签,现在随着H5的兴起,鉴于该标签糟糕的体验,这个标签已经被W3C标准废弃了,尽管现在浏览器还支持这个标签,但是寻找文字滚动的新方式才是未来的选择.也有很多人会 ...
android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:
html中实现图片的无限滚动,CSS3 背景图片无限滚动之波浪效果的实现
效果 HTML body{ background: #2f2e34; } .a,.b,.c{width: 100%; height: 240px; position: absolute; bottom ...
CSS3无限滚动(无线循环滚动)
原文地址:https://www.cnblogs.com/xumengxuan/p/7114721.html 用CSS3实现无限循环的无缝滚动有时候在页面的某个模块中,需要无限循环的滚动一些消息.那 ...
文字滚动插件（css3动画）- 代码篇
文字滚动插件(css3动画)- 代码篇效果图动画: templete代码如下: <div class="list"><div class="rowup ...
css动画结束闪烁,每个无限CSS3动画结束时的毛刺/闪烁/眨眼
必须遵守的代码,但jsFiddle完全证明了这个问题.我有一个圈子可以在3秒内扩展和淡出.声纳风格是我的意图.问题在于动画完成后"快速闪烁",然后重新开始.每个无限CSS3动画结束 ...
CSS3动画实战之多关键帧实现无限循环动效的时间间隔
题目有点绕,源起最近一个项目中所需的一枚loading图标.SVG+CSS3动画做了那么多,真正应用在项目中的机会少之又少,所以,抓住一切机会,即使loading也不能放过,用系统自带菊花有辱我这一年 ...

css3动画魔方无限滚动

css3动画魔方无限滚动

css3动画魔方无限滚动相关推荐

最新文章

热门文章

css3动画 魔方 无限滚动

css3动画 魔方 无限滚动

css3动画 魔方 无限滚动相关推荐

最新文章

热门文章

css3动画魔方无限滚动

css3动画魔方无限滚动

css3动画魔方无限滚动相关推荐