CSS3之3D轮播图

时间:2022-09-12 08:53:53
<!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轮播图的更多相关文章

  1. 3d轮播图(另一种方式,可以实现的功能更为强大也更为灵活,简单一句话,比酷狗优酷的炫)

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

  2. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  3. CSS3&plus;JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  4. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  5. 微信小程序 - 3d轮播图组件&lpar;基础&rpar;

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  6. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  7. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  8. CSS3 实现简单轮播图

    用css3动画实现图片切换效果,原理还是改变left值.只有最简单的自动播放功能,切换后短时间静止,通过最后的位置克隆第一张图片,实现无缝切换. html结构 <div id="con ...

  9. featureCarousel&period;js 3d轮播图插件

    jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...

随机推荐

  1. 基本数据结构&lpar;2&rpar;&mdash&semi;&mdash&semi;算法导论&lpar;12&rpar;

    1. 引言     这一篇博文主要介绍链表(linked list),指针和对象的实现,以及有根树的表示. 2. 链表(linked list) (1) 链表介绍      我们在上一篇中提过,栈与队 ...

  2. 使用maven来管理java项目

    初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...

  3. notepad&plus;&plus; :正则表达式系统教程

    前言&索引 前言 正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感.只要认真去阅读这些资料,加上应用的时候进行一定的参考,掌握正则表达式不是问题. 索 ...

  4. Android之 compileSdkVersion&comma; minSdkVersion&comma; and targetSdkVersion

    在一年之中,也有可能只是几个月后,你会发布你的Android应用程序.但是这中间有可能会发布新的版本的Android系统,比如:6.0+. 你肯定希望你的应用可以向前兼容,当用户升级到新的Androi ...

  5. JavaScript Hoisting

    Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope ...

  6. Intent的Data和Type和Flag属性-amdroid学习之旅(五十一)

    Data属性介绍 使用Data和Action属性启动系统Activity 代码示例 public class MainActivity extends Activity{ @Override prot ...

  7. springboot 与任务

    异步任务.定时任务.邮件任务 一.异步任务 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在 处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用 多线程来 ...

  8. 原生js的开发笔记

    1.基本的dom操作 var a=document.getElementById('ma1').innerHTML;/获取html代码 alert(document.getElementById('m ...

  9. FutureTask类

    FutureTask类是Future 的一个实现,并实现了Runnable. 所以可通过Executor(线程池)来运行,也可传递给Thread对象运行.  假设在主线程中须要运行比較耗时的操作时.但 ...

  10. maven配置本地仓库通用

    只要在settings.xml文件中指定仓库就可以了,然后复制仓库到任何地方都可以使用,eclipse中指定一个settings.xml就可以了 仓库的位置是.locks所在目录