小制作-css+html旋转木马
源代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
transform-style: preserve-3d;
background-image: radial-gradient(yellow,pink)
}
.outer{
width: 200px;
height: 300px;
/* border:1px solid green;*/
position: relative;
margin:100px auto;
transform: rotateY(10deg) rotateX(30deg);
transform-style: preserve-3d;
/*transform: rotateX(-38deg)rotateY(-35deg) ;*/
animation: mofang 7s linear infinite;
}
@keyframes mofang{
from{
transform:rotateX(0deg) rotateY(10deg);
}
to{
transform:rotateY(360deg)rotateX(10DEG);
}
}
.inner{
width: 200px;
height: 300px;
border:2px solid red;
position: absolute;
}
.inner:nth-child(1){
transform: translateZ(308PX);
}
.inner:nth-child(2){
transform: translateZ(-308PX);
}
.inner:nth-child(3){
transform: rotateY(36deg)translateZ(310PX);
}
.inner:nth-child(4){
transform: rotateY(36deg)translateZ(-310PX);
}
.inner:nth-child(5){
transform: rotateY(72deg)translateZ(310PX);
}
.inner:nth-child(6){
transform: rotateY(72deg)translateZ(-310PX);
}
.inner:nth-child(7){
transform: rotateY(108deg)translateZ(310PX);
}
.inner:nth-child(8){
transform: rotateY(108deg)translateZ(-310PX);
}
.inner:nth-child(9){
transform: rotateY(144deg)translateZ(310PX);
}
.inner:nth-child(10){
transform: rotateY(144deg)translateZ(-308PX);
}
h2{
color: orange;
}
</style>
</head>
<body>
<marquee scrollamount="5">
<h2>
《多幸运》
词:刘家泽
曲:胜屿
演唱：韩安旭
在亿万人海相遇
有同样默契
是多么不容易
你懂得我的固执
我懂你脾气
两颗心在靠近
等不及解释我的心情
怕错过爱上你的时机
浪漫已经 准备就绪
全新的旅行
多幸运
在最美的年纪
遇见你
没有遗憾和可惜
抱紧你
用尽全部力气
不让幸福逃离
多幸运
爱你这件事情
成为我
今生最对的决定
我相信
你就是那唯一
愿陪你到底
多幸运 遇见了你
多幸运 爱上了你
多幸运 能在一起
多幸运 遇见了你
多幸运 爱上了你
多幸运 能在一起
在亿万人海相遇
有同样默契
是多么不容易
你懂得我的固执
我懂你脾气
两颗心在靠近
等不及解释我的心情
怕错过爱上你的时机
浪漫已经 准备就绪
全新的旅行
多幸运
在最美的年纪
遇见你
没有遗憾和可惜
抱紧你
用尽全部力气
不让幸福逃离
多幸运
爱你这件事情
成为我
今生最对的决定
我相信
你就是那唯一
愿陪你到底
多幸运 遇见了你
多幸运 爱上了你
多幸运 能在一起
多幸运 遇见了你
多幸运 爱上了你
多幸运 能在一起
多幸运
在最美的年纪
遇见你
没有遗憾和可惜
抱紧你
用尽全部力气
不让幸福逃离
多幸运
爱你这件事情
成为我
今生最对的决定
我相信
你就是那唯一
愿陪你到底 </h2></marquee>
<audio src="http://wl.baidu190.com/1465095357/fbef26cbf77c7072a34ba1dd074e889b.mp3" autoplay loop="loop"></audio>
<div class="outer">
<div class="inner"><img src="1.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="2.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="3.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="4.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="5.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="6.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="7.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="8.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="9.jpg" width="200px" height="300px"></div>
<div class="inner"><img src="10.jpg" width="200px" height="300px"></div>
</div>
</body>
</html>
静态截图《想侧面添加图片的，把准备好的图片插入源代码相应位置就ok啦》：
小制作-css+html旋转木马的更多相关文章
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- 鼠标悬浮上去显示小手CSS
鼠标悬浮上去显示小手CSS只需要添加一句css代码即可 cursor:pointer;
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- 【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图
无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...
- 【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
- 在线制作css动画——cssanimate
熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...
- 一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...
- 在线制作css动画——CSS animate
熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能——cssanimate,这个最大的特色就是以图形界面方式 ...
随机推荐
- AAS代码运行-第11章-2
hdfs dfs -ls /user/littlesuccess/AdvancedAnalysisWithSparkhdfs dfs -mkdir /user/littlesuccess/Advanc ...
- 在gridControl的单元格中的多行文本
我们知道,gridcontrol里面的单元格默认是不能换行的,但是有时候我们需要显示要换行的文本,应该怎么处理呢?这里提供一个方案: 假设我有一个列”合同文本“(colContractText),我要 ...
- Android事件分发机制（上）
Android事件分发机制这个问题不止一个人问过我,每次我的回答都显得模拟两可,是因为自己一直对这个没有很好的理解,趁现在比较闲对这个做一点总结 举个例子: 你当前有一个非常简单的项目,只有一个Act ...
- git学习【转载】
最近参与别人的github项目时,学习了Git的使用,首先需要在https://github.com/网站上注册账号和邮箱,然后fork一个开源项目,然后下载目前Windows下最新版本的git,下载 ...
- [网络技术][转]网卡的offload概念
网络数据包分析 网卡Offload 对于网络安全来说,网络传输数据包的捕获和分析是个基础工作,绿盟科技研究员在日常工作中,经常会捕获到一些大小远大于MTU值的数据包,经过分析这些大包的特性,发现和网卡 ...
- It will affect staff as well.
Premier Foods has reduced its number of suppliers dramatically in the last 12 months. In 2013 it mad ...
- HyperV采用硬盘拷贝的方式迁移虚拟机后的问题处理
公司有一台RSA认证服务器,是在windows 2008 R2下的虚拟机,最近总是出现服务中断的情况,考虑到宿主机性能较差,于是想迁移到新的服务器中. 本想通过SCVMM来迁移,但因功能不可用,所以采 ...
- Scrum领取任务
这次主要讨论了产品的构造流程,怎么将任务分配到个人,讨论什么功能具体怎么实现,然后各自选取了任务. 在团队项目“广商百货”的SCRUM项目中我认领的任务是对登录功能的实现.现在还没正式开始,还在看书和 ...
- MySQL数据库4 - 查看数据表
一. 查看表的基本结构 语法:DESCRIBE/DESC TABLE_NAME 查询结果含义: Field: 字段名 Type: 字段类型 Null: 是否可以为空 Key: 是否编制索引 defau ...
- 团队开发——冲刺2.g
冲刺阶段二(第七天) 1.昨天做了什么? 编写软件计划书第三阶段:整理用户体验建议:据用户对界面的要求,把小球改头换面,借鉴超级马里奥叔叔的道具们. 2.今天准备做什么? 最后的美工,统一整合: 测试 ...