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 ...
随机推荐
- 安装网卡ifconfig不出现问题
安装万兆网卡,Ethernet controller: Intel Corporation 82599EB 10-Gigabit SFI/SFP+ Network Connection 使用lspci ...
- Including R code in perl
#example: use Statistics::R;#use R in perlmy $R = Statistics::R->new() ;$R->startR ;$R->sen ...
- 关于memset赋值问题
学习借鉴自:https://blog.csdn.net/yexiaohhjk/article/details/52717934 memset是C语言头文件<string.h>中的一个函数, ...
- hdu 1372 BFS
A friend of you is doing research on the Traveling Knight Problem (TKP) where you are to find the sh ...
- Python实例之抓取HTML中的数据并保存为TXT
本实例实现了抓取捧腹网中存储于html中的笑话数据(非JSON数据) 通过浏览器相关工具发现捧腹网笑话页面的数据存储在HTML页面而非json数据中,因此可以直接使用soup.select()方法来抓 ...
- JAVA基础搬运工
1Java线程的6种状态及切换 https://blog.csdn.net/pange1991/article/details/53860651/ 2进程和线程的区别 https://www.cnbl ...
- 【druid 】数据库连接池-sql解析
https://segmentfault.com/a/1190000008120254?utm_source=tuicool&utm_medium=referral sql解析 Druid 的 ...
- docker安装centos后没有ifconfig命令解决办法
使用docker pull centos命令下载下来的centos镜像是centos7的最小安装包,里面并没有携带ifconfig命令,导致我想查看容器内的ip时不知道该怎么办 yum provide ...
- linux下的c程序排版工具:indent
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010839382/article/details/30779523 Linux下有一个方便的c语言 ...
- Pong 打乒乓
发售年份 1972 发售平台 多平台 开发商 雅达利(Atari) 类型 体育休闲 https://www.youtube.com/watch?v=fiShX2pTz9A