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 免杀原理与实践 免杀 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. 要做好免杀,就时清楚杀毒软件( ...
- 【EMV L2】CDA复合动态数据认证/应用密文生成
复合动态数据认证/应用密文生成处理流程:对于复合动态数据认证/应用密文生成,终端执行标准动态数据认证的步骤1到3:1.认证中心公钥的获取终端使用认证中心公钥索引(PKI)以及卡片中的注册的应用提供商标 ...
- switch_case注意事项
1.switch 语句有至少一个 case 代码块和一个可选的 default 代码块. 这里的 switch 从第一个 case 分支比较 a 的值,值为 3 匹配失败.然后比较 4.匹配,所以从 ...
- Web应用程序的安全问题
常规的安全问题主要分为以下几大类 一,跨站脚本攻击(XSS) 指的是攻击者向web页面注入恶意的Javascript代码,然后提交给服务器,但是服务器并没有做校验和转义等处理,随即服务器的响应页就被植 ...
- ryzen nvidia hackintosh
1. 安装 参考 https://baijiahao.baidu.com/s?id=1595121885424169378&wfr=spider&for=pc 版本10.13.3 ...
- pycharm的快捷键
一.编辑(Editing) Ctrl+Space 基本的代码完成(类.方法.属性) Ctrl+Alt+Space 快速导入任意类 Ctrl+Shift+Enter 语句完成 Ctrl+P 参数信息(在 ...
- sed常用操作命令
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据进行替换.删除.新增.选取等特定工作. 命令格式: sed [OPTION]... {script-only-i ...
- LDAP&it's usage
LDAP: 的英文全称是Lightweight Directory Access Protocol,简称为LDAP.LDAP是轻量目录访问协议[1],它是基于X.500标准的,但是简单多了并且可以根据 ...
- JS写法 数值与字符串的相互转换 取字符中的一部分显示 正则表达规则
http://www.imooc.com/article/15885 正则表达规则 <script type="text/javascript"> </scrip ...
- python excle写数据
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/4/24 10:30 # @File : Excle写.py # @Softw ...