使用纯csss实现的魔法案例

话不多说先上结果截图


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>美丽魔方</title><link rel="stylesheet" type="text/css" href="css/reset.css"/></head><style type="text/css">body,html{background-color: #000;background-image:url(img/stra1.gif) ;background-repeat:repeat-x ;}ul{width: 600px;height: 600px;position: fixed;left: 0;bottom: 0;top: 0;right: 0;margin: auto;/*perspective: 800px;*/transform-style: preserve-3d;transform: rotateX(15deg) rotateY(-15deg);}ul{animation:ss 2s infinite;}ul li{width: 400px;background: #f47;height: 400px;position: absolute;}ul li:nth-child(1){background-size: 100% 100%;transform: translateZ(200px);background-image: url(img/1.jpg);animation:box 1s infinite;}ul li:nth-child(2){background-size: 100% 100%;transform: translateZ(-200px);animation:box1 1s infinite;background-image: url(img/15.jpg);}ul li:nth-child(3){background-size: 100% 100%;background-image: url(img/27.jpg);animation:box2 1s infinite;transform: translateX(200px) rotateY(90deg);}ul li:nth-child(4){background-size: 100% 100%;background-image: url(img/28.jpg);transform: translateX(-200px) rotateY(90deg);animation:box3 1s infinite;}ul li:nth-child(5){background-size: 100% 100%;background-image: url(img/30.jpg);transform: translateY(200px) rotateX(90deg);animation:box4 1s infinite;}ul li:nth-child(6){background-image: url(img/31.jpg);background-size: 100% 100%;transform: translateY(-200px) rotateX(90deg);animation:box5 1s infinite;}ul li:nth-child(7){background-image: url(img/stra1.gif);/*background-size: 100% 100%;animation:box5 1s infinite;*/}@keyframes ss{from{/*transform: scaleZ(0.5);*/transform: rotateX(15deg) rotateY(-15deg)  scaleZ(0);}to{/*transform: scaleZ(1);*/transform: rotateX(-360deg) rotateY(360deg)  scaleZ(1.5);}}@keyframes box{0%{transform: translateZ(200px);}50%{transform: translateZ(400px);}100%{transform: translateZ(200px);}}@keyframes box1{0%{transform: translateZ(-200px);}50%{transform: translateZ(-400px);}100%{transform: translateZ(-200px);}}@keyframes box2{0%{transform: translateX(200px) rotateY(90deg);}50%{transform: translateX(400px) rotateY(90deg);}100%{transform: translateX(200px) rotateY(90deg);}}@keyframes box3{0%{transform: translateX(-200px) rotateY(90deg);}50%{transform: translateX(-400px) rotateY(90deg);}100%{transform: translateX(-200px) rotateY(90deg);}}@keyframes box4{0%{transform: translateY(200px) rotateX(90deg);}50%{transform: translateY(400px) rotateX(90deg);}100%{transform: translateY(200px) rotateX(90deg);}}@keyframes box5{0%{transform: translateY(-200px) rotateX(90deg);}50%{transform: translateY(-400px) rotateX(90deg);}100%{transform: translateY(-200px) rotateX(90deg);}}</style><body><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></body>
</html>

更多案例请查看:https://www.imooc.com/article/details/id/31773

使用纯csss实现的魔法案例相关推荐

纯csss实现轮播图效果
1.先看效果,鼠标移入到图片,暂停轮播. 2.上码 <!DOCTYPE html> <html lang="en"> <head><met ...
纯函数是什么？怎么合理运用纯函数？
前言纯函数这个这个词我相信小伙伴们多多少少都听说过,它是函数式编程的基础.本文主要是对纯函数进行探讨,包括基本概念,优点,运用的经典案例以及我们日常该如何去合理的使用等等. 纯函数的概念首先我们来 ...
干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
虚幻引擎学习资源汇总
一.虚幻引擎全球虚幻引擎官网首推的依然是虚幻引擎官网,在这里你能够获得众多学习渠道的入口.包括最新事件新闻.在线学习.论坛等各种资源. 要点: 各渠道入口新闻里有最新资讯虚幻官方在线学习在初 ...
android 开源Spanner,著名的分布式事务数据库谷歌Spanner设计有坑！
CAP定理指出,在网络分区的情况下,不可能同时保证一致性和可用性.由于网络分区在可扩展的分布式系统中理论上是可行的,因此现代可扩展数据库系统的架构师分为两大阵营:优先考虑可用性的阵营(NoSQL阵营) ...
PPT 下载 | 神策数据曹犟：数据驱动从方法到实践
本文根据神策数据联合创始人& CTO 曹犟在神策 2018 数据驱动大会现场,发表题为<数据驱动从方法到实践>演讲整理所得. 温馨提示:完整版 PPT 可点击阅读原文下载. 主要内 ...
如何创造具有竞争性的新品类？
娃哈哈营养快线.香飘飘杯装奶茶和红牛功能饮料等产品新品类的成功,使我们的企业家和营销经理都完全接受并认可了,创造一个新品类产品对一个企业在市场竞争中竞争地位的飙升有着巨大的作用,关于品类的文章在各种财 ...
javascript实现下拉条联动_JavaScript gt;gt;gt; 003
定义函数: 调用函数: 提示:一般要先定义函数,然后再调用函数. 变量赋值方式声明函数(匿名函数使用) 语法:var 函数名 = function (){} 在javascript里边,函数就是一个变 ...
谁能真正“撬动”微信？| 畅言
作者 | 小谦责编 | 郭芮聊天宝.多闪.马桶MT围剿微信,谁会更有胜算? 2019年1月15日,这注定是一个载入互联网发展历史的重要时刻.仅仅一天时间内,三家企业接连召开社交产品的发布会,并且各 ...

使用纯csss实现的魔法案例

使用纯csss实现的魔法案例相关推荐

最新文章

热门文章