CSS3之3D轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url("images/jacky/bg.jpg") no-repeat;
background-size:cover;
overflow: hidden;
}
ul{
width: 200px;
height: 200px;
/*background-color: red;*/
position: absolute;
bottom: 100px;
left: 50%;
margin-left:-100px;
transform-style: preserve-3d;
/*transform: rotateX(-10deg);*/
animation: sport 6s linear 0s infinite normal;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: black;
}
ul li:nth-child(1){
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
transform: rotateY(360deg) translateZ(200px);
}
ul li img{
width: 200px;
height: 200px;
border: 5px solid skyblue;
box-sizing: border-box;
}
ul:hover{
animation-play-state: paused;
}
ul:hover li img{
opacity: 0.5;
}
ul li:hover img{
opacity: 1;
}
@keyframes sport {
from{
/*
注意点:
1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
*/
transform: rotateX(-10deg) rotateY(0deg);
}
to{
transform: rotateX(-10deg) rotateY(360deg);
}
}
.heart{
width: 173px;
height: 157px;
position: absolute;
left: 100px;
bottom: 100px;
animation: move 10s linear 0s infinite normal;
}
@keyframes move {
0%{
left: 100px;
bottom: 100px;
opacity: 1;
}
20%{
left: 300px;
bottom: 300px;
opacity: 0;
}
40%{
left: 500px;
bottom: 500px;
opacity: 1;
}
60%{
left: 800px;
bottom: 300px;
opacity: 0;
}
80%{
left: 1200px;
bottom: 100px;
opacity: 1;
}
100%{
left: 800px;
bottom: -200px;
}
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/jacky/1.png" alt=""></li>
<li><img src="data:images/jacky/2.jpg" alt=""></li>
<li><img src="data:images/jacky/3.jpg" alt=""></li>
<li><img src="data:images/jacky/4.gif" alt=""></li>
<li><img src="data:images/jacky/5.jpg" alt=""></li>
<li><img src="data:images/jacky/6.jpg" alt=""></li>
</ul>
<img src="data:images/jacky/xin.png" class="heart"> </body>
</html>
效果如下：
CSS3之3D轮播图的更多相关文章
- 利用css3实现3D轮播图
动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
- 3d轮播图——类似酷狗的轮播
说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 微信小程序3D轮播图
<!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...
- 插件-3D轮播图
先上效果图 查看实例点击 这里 这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...
- CSS3 实现简单轮播图
用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...
随机推荐
- 2018-2019-2 网络对抗技术 20165228 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165228 Exp3 免杀原理与实践 免杀 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. 要做好免杀,就时清楚杀毒软件( ...
- 测试那些事儿—LR脚本插入DOS命令
1.基础命令 dir 查看当前目录下的文件和文件夹 cd 目录名:进入特定的目录. md 路径名:建立特定的文件夹. rd 路径名:删除特定的文件夹. cls:清除屏幕. copy 路径\文件名 ...
- 关于java中为什么尽量把受检异常转化为非受检异常
首先理解一下受检异常与非受检异常: 异常表示程序运行过程中可能出现的非正常状态,运行时异常表示虚拟机操作中可能遇到的异常,是一种常见的运行错误,只要程序设计的没有问题通常就不会发生.受检异常与程序的上 ...
- .NET中的StringBuilder
为什么要使用StringBuilder 为什么使用StringBuilder要从string对象的特性说起. string对象在进行字符串拼接时,因为字符串的不可变性,string对象会每次拼接,都会 ...
- 20164301 Exp1 PC平台逆向破解
逆向及Bof基础实践 一.实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数, foo函数会简单回显任何用户输入的字符串.该程序同时包含另一 ...
- 求最小环 —— 并查集 与 Floyd
对于一个图,如何求出其中的最小环(不包括一元环)? 很显然,对于一个无向图,每一条边都是一个二元环:对于有向图,可以考虑从每一个点出发,用DFS求出它到自己的距离,如果遍历了$N$个点仍未便利到自己, ...
- 链表中倒数第k个节点(Java)
链表中倒数第k个节点 题目描述 输入一个链表,输出该链表中倒数第k个结点. 思路:two-pointers思想,因为是单链表,没法得prevous点,直接遍历得到链表长度再重新遍历效率很低. 采用双指 ...
- Android Studio 调试快捷键
一直在用微软的东西,用 Android Studio 开发还是太坑了.网上很多人说调试快捷竟然都是错的,不知道是不是不同版本不一样. Android Studio 3.2 快捷键如下: F7:进入当前 ...
- 命令生成所有数据库表模型以及 CRUD
将下列代码写到文件复制到项目 console\controller 目录下: <?php namespace console\controllers; use Yii; use yii\cons ...
- python selenium-webdriver 登录验证码的处理（十二）
很多系统为了防止坏人,会增加各样形式的验证码,做测试最头痛的莫过于验证码的处理,验证码的处理一般分为三种方法 1.开发给我们设置一个万能的验证码: 2.开发将验证码给屏蔽掉: 3.自己识别图片的上的千 ...