html加css做成的简易木马轮播图

自己做着当练习的，还没有加js切页效果
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mumua轮播图</title>
</head>
<style>body {/* 添加透视效果 */perspective: 1000px;}/* 旋转动画 */@keyframes mumua {0% {}100% {transform: rotateY(360deg);}}section {position: relative;width: 300px;height: 200px;margin: 150px auto;/* 3D呈现效果 */transform-style: preserve-3d;/* 调用动画 时长设置为10s 匀速 无限 */animation: mumua 10s linear infinite;background: url("images/7.png");background-size: 100% 100%;}section:hover {/* 鼠标经过动画暂停 */animation-play-state: paused;}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}div:nth-child(1) {transform:  translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}div:nth-child(2) {transform:  rotateY(60deg) translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}div:nth-child(3) {transform:  rotateY(120deg) translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}div:nth-child(4) {transform:  rotateY(180deg) translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}div:nth-child(5) {transform:  rotateY(240deg) translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}div:nth-child(6) {transform:  rotateY(300deg) translateZ(300px);background: url(images) no-repeat;background-size: 100% 100%;}
</style>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body>
</html>

加上自己喜欢的图片就好了
喜欢的话点个赞再走吧，有问题也可以留言

html加css做成的简易木马轮播图相关推荐

javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画（公开完整源码）
目录:完整源码仅供学习一.效果演示二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载一.效 ...
简易jQuery轮播图插件
轮播图插件为简易的jQuery轮播图,实现点击无缝轮播,可用在移动端. 样式有问题,叠加修改即可. 下载地址:https://github.com/Summer-Lin/carousel HTML代码 ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧示意图1.png 示意图2.png 示意图3.png 实现思路使用 d ...
css+js手写卡片轮播图
实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样下面是代码 <html lang="en"><head><me ...
学成在线HTML代码,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）
成品截图前期准备素材一.项目页面PSD源文件下载地址https://chuenst.lanzous.com/i7hlggnl6vc 二.前期准备工作创建study目录文件夹 (用于存放这个页面 ...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
简而言之就是,将导航的ul列表放在一个盒子里,然后导航栏置顶,设置透明度,设置z-index值效果图如下: 页面代码: body: <div clas ...

html加css做成的简易木马轮播图

html加css做成的简易木马轮播图

html加css做成的简易木马轮播图相关推荐

最新文章

热门文章