html动效轮播,HTML5 多边形棱镜翻滚动效的图片轮播

最新推荐文章于 2022-08-31 22:43:00 发布
最新推荐文章于 2022-08-31 22:43:00 发布
阅读量124 收藏 1
点赞数
文章标签： html动效轮播

CSS

语言：

CSSSCSS

确定

/* SET UP */

body {

font-family: 'Helvetica Neue', Arial, sans-serif;

-webkit-text-size-adjust: none;

padding: 0;

margin: 0 auto;

color: #fff;

background: #f4caae;

}

p {

margin: 0 0 20px;

}

button {

font-size: 12px;

background-color: #00bf1d;

border: none;

padding: 0;

margin: 0 5px;

display: inline-block;

vertical-align: top;

min-width: 0;

text-indent: -9999999px;

width: 20px;

height: 20px;

overflow: hidden;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-o-border-radius: 10px;

}

button.active {

background-color: #fff;

}

button:hover {

background-color: #fff;

color: #fff;

cursor: pointer;

}

button:focus {

outline: 0;

}

figure {

margin: 0;

}

.outter {

width: 80%;

display: table;

margin: 30px auto;

}

.inner {

display: table-cell;

vertical-align: middle;

width: 100%;

text-align: center;

position: relative;

overflow: hidden;

}

#title {

position: absolute;

top: 20px;

left: 0;

padding: 20px;

margin: 0 20px;

border: 2px solid #fff;

font-size: 18px;

}

#show-buttons {

position: absolute;

bottom: 20px;

left: 0;

padding: 0;

margin: 0;

font-size: 0;

text-align: center;

width: 100%;

}

#backface-button {

position: absolute;

top: 20px;

right: 20px;

padding: 0;

/* DYNAMIC */

margin: 0;

}

.container {

max-width: 100%;

height: 400px;

position: relative;

margin: 0 auto;

-webkit-perspective: 1000px;

-moz-perspective: 1000px;

-o-perspective: 1000px;

perspective: 1000px;

}

#cube {

width: 100%;

height: 100%;

position: absolute;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transition: -webkit-transform 1s;

-moz-transition: -moz-transform 1s;

-o-transition: -o-transform 1s;

transition: transform 1s;

}

#cube figure {

display: block;

position: absolute;

width: 100%;

height: 400px;

border: none;

line-height: 400px;

font-size: 36px;

font-weight: bold;

color: white;

text-align: center;

/*

#cube figure {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

*/

background: rgba(255, 0, 0, 0.75);

}

#cube .f0 {

background: rgba(255, 0, 0, 0.75);

background-image: url('/uploads/151001/0.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f0 {

-webkit-transform: rotateX(0deg) translateZ(346.41016px);

-moz-transform: rotateX(0deg) translateZ(346.41016px);

-o-transform: rotateX(0deg) translateZ(346.41016px);

transform: rotateX(0deg) translateZ(346.41016px);

}

#cube.m0 {

-webkit-transform: translateZ(-346.41016px) rotateX(0deg);

-moz-transform: translateZ(-346.41016px) rotateX(0deg);

-o-transform: translateZ(-346.41016px) rotateX(0deg);

transform: translateZ(-346.41016px) rotateX(0deg);

}

#cube .f1 {

background: rgba(255, 64, 0, 0.75);

background-image: url('/uploads/151001/1.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f1 {

-webkit-transform: rotateX(60deg) translateZ(346.41016px);

-moz-transform: rotateX(60deg) translateZ(346.41016px);

-o-transform: rotateX(60deg) translateZ(346.41016px);

transform: rotateX(60deg) translateZ(346.41016px);

}

#cube.m1 {

-webkit-transform: translateZ(-346.41016px) rotateX(-60deg);

-moz-transform: translateZ(-346.41016px) rotateX(-60deg);

-o-transform: translateZ(-346.41016px) rotateX(-60deg);

transform: translateZ(-346.41016px) rotateX(-60deg);

}

#cube .f2 {

background: rgba(255, 128, 0, 0.75);

background-image: url('/uploads/151001/2.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f2 {

-webkit-transform: rotateX(120deg) translateZ(346.41016px);

-moz-transform: rotateX(120deg) translateZ(346.41016px);

-o-transform: rotateX(120deg) translateZ(346.41016px);

transform: rotateX(120deg) translateZ(346.41016px);

}

#cube.m2 {

-webkit-transform: translateZ(-346.41016px) rotateX(-120deg);

-moz-transform: translateZ(-346.41016px) rotateX(-120deg);

-o-transform: translateZ(-346.41016px) rotateX(-120deg);

transform: translateZ(-346.41016px) rotateX(-120deg);

}

#cube .f3 {

background: rgba(255, 191, 0, 0.75);

background-image: url('/uploads/151001/3.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f3 {

-webkit-transform: rotateX(180deg) translateZ(346.41016px);

-moz-transform: rotateX(180deg) translateZ(346.41016px);

-o-transform: rotateX(180deg) translateZ(346.41016px);

transform: rotateX(180deg) translateZ(346.41016px);

}

#cube.m3 {

-webkit-transform: translateZ(-346.41016px) rotateX(-180deg);

-moz-transform: translateZ(-346.41016px) rotateX(-180deg);

-o-transform: translateZ(-346.41016px) rotateX(-180deg);

transform: translateZ(-346.41016px) rotateX(-180deg);

}

#cube .f4 {

background: rgba(255, 255, 0, 0.75);

background-image: url('/uploads/151001/4.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f4 {

-webkit-transform: rotateX(240deg) translateZ(346.41016px);

-moz-transform: rotateX(240deg) translateZ(346.41016px);

-o-transform: rotateX(240deg) translateZ(346.41016px);

transform: rotateX(240deg) translateZ(346.41016px);

}

#cube.m4 {

-webkit-transform: translateZ(-346.41016px) rotateX(-240deg);

-moz-transform: translateZ(-346.41016px) rotateX(-240deg);

-o-transform: translateZ(-346.41016px) rotateX(-240deg);

transform: translateZ(-346.41016px) rotateX(-240deg);

}

#cube .f5 {

background: rgba(191, 255, 0, 0.75);

background-image: url('/uploads/151001/5.gif');

background-position: center;

background-repeat: no-repeat;

}

#cube .f5 {

-webkit-transform: rotateX(300deg) translateZ(346.41016px);

-moz-transform: rotateX(300deg) translateZ(346.41016px);

-o-transform: rotateX(300deg) translateZ(346.41016px);

transform: rotateX(300deg) translateZ(346.41016px);

}

#cube.m5 {

-webkit-transform: translateZ(-346.41016px) rotateX(-300deg);

-moz-transform: translateZ(-346.41016px) rotateX(-300deg);

-o-transform: translateZ(-346.41016px) rotateX(-300deg);

transform: translateZ(-346.41016px) rotateX(-300deg);

}

Pt.wang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5棱镜粒子飞出动画特效特效代码
03-20
HTML5棱镜粒子飞出动画特效是一款基于HTML5 Canvas绘制的四边形棱镜，酷炫的粒子飞出动画特效。
react,js前端轮播图 Swipper Carousel实现无缝滚动效果
qq_42704945的博客
08-29 3116
在末尾我有复制了一个视图第一个元素的dom，这个就是实现无缝滚动的关键所在。当我们滑动到了最后一个视图，我们可以把整个容器的位置设置成最开始的位置，这样就可以完美实现最后一个视图和第一个视图的完美衔接了。主要就是判断临界值在每个临界值的时候处理的逻辑有一点区别，其次就是在动画的取消还有动画的效果上面，什么时候应该滑动的时候不能加动画，什么时候有需要把动画效果加上。每次移动的时候呢就是整个容器一起移动每次移动的距离每次就一个dom。这个无缝的关键就是在动画效果取消，动画效果恢复。
html图片做成菱形,两种css实现菱形的方法以及拓展特效
weixin_32924669的博客
06-03 2192
提到用css实现菱形，在我看来有两种比较便利而且兼容性不错的方法，实现的方式也都不难，但是简单的方法其实也可以做出一些眼前一亮的特效，后面会为大家介绍，下面先来说说两种实现菱形的方式。方法一：border法利用 border 来实现2个三角形，将三角形叠在一起，实现一个类似的效果。这是一种不错的方案，兼容性也不错，现在做三角形或者菱形我也经常使用这种方式。我也不过多介绍了，附源码效果如图方法二：C...
html叠加带棱角的图片,HTML5 Canvas 响应式棱镜特效图片轮播 - 潘洛斯三角
weixin_36265665的博客
06-09 129
JavaScript语言：JaveScriptBabelCoffeeScript确定/*** The slideshow controller.* Get settings and initialise PrismSlider for each layer,* add controls and events, then call slideTo method on click.* @return ...
html设置来回滚动,CSS3 来回翻滚式的Loading动效
weixin_39872334的博客
06-09 298
CSS语言：CSSSCSS确定html,body {height: 100%;}.wrap {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;width: 100%;height: 100%;-webkit-box-pack: center;-webkit-justify-content: ...
html好看的图片轮播多种风格（源码）
10-17
多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。 示例地址：https://blog.csdn.net/weixin_43151418/article/details/125842089
HTML3D轮播切换图片源码附注释.rar
08-08
源码使用CSS属性+原生js代码实现图片轮播切换、图片整体跟随鼠标移动效果、图片整体鼠标滚轮控制缩放，使用的css属性包括：弹性盒布局元素居中、背景图片平铺尺寸设置、相对、绝对定位、滤镜效果、图片层级、边距...
html实现图片轮播（含代码和注释）
12-20
最后，在JavaScript部分，我们通过获取轮播图容器和其中的图片元素来操作轮播图。我们使用变量currentSlide来存储当前显示的图片索引，并使用setInterval函数设置了一个定时器，每隔3000毫秒（3秒）切换到下一张图片...
HTML5图片倾斜轮播切换3D特效特效代码
03-20
在这个"HTML5图片倾斜轮播切换3D特效"项目中，我们主要关注的是如何利用HTML5的特性来实现一种创新且引人注目的图片展示方式。这个特效代码通过将图片以倾斜的布局排列，并结合3D旋转效果，创造出一种立体感十足的...
实用的html5图片轮播效果
03-11
HTML5是一种强大的网页开发语言，它为网页开发者提供了丰富的功能和接口，其中之一就是实现动态、交互式的图片轮播效果。这种效果可以增强用户体验，使网站更加生动有趣。在这个主题中，我们将深入探讨如何利用HTML5...
HTML5 3D视觉翻滚动画.zip
07-04
HTML5 3D视觉翻滚动画是一款利用HTML5 Canvas模拟翻滚动画特效的3D视觉效果。
html5全屏酷炫3D多边形背景动画特效
06-11
jQuery+html5实现的全屏酷炫3D多边形背景动画特效，非常创意好看的网页动态背景效果。
使用html5和css3动画制作网页轮播图效果
weixin_63689594的博客
08-31 1523
动画常用属性 轮播图的制作，html css3 3D动画 轮播图动画制作 ，@keyframes的使用，动画的使用，动画序列和效果展示
HTML5+js的两种轮播图(静态获取图片方法和动态获取图片)
热门推荐
朱小熊的博客
09-05 2万+
HTML5+js的两种轮播图(静态获取图片方法和动态获（json）取图片) 第一种：静态写法，给定图片的个数，用js实现轮播图自动转换。 第二种：动态获取图片写法。在js块中写入存放图片和相关数据的数组，然后通过拼接字符串的方式展示到页面中，然后设置相关的样式.
css实现三面立体旋转无限轮播图动画（代码示例）
lin123_00的博客
04-29 1901
本篇文章给大家介绍css实现三面立体旋转无限轮播图动画（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以问我，随时给大家解答。再次感谢大家。 在之前的...
aos.css——页面滚动动效库
John的专栏
02-23 1692
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和WOWJS一样，的确他们效果是类似的。但是AOS是 css3动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。demo地址：https://michalsnik.github.io/aos/...
动效轮播图
lotte
07-24 1652
首先引入库jquery.cloud9carousel.js ; (function ($) { var transform = (function () { var vendors = ['webkit', 'moz', 'ms']; var style = document.createElement("div").style; var trans = 'tr...
用动画实现轮播效果（animation）
m0_61373758的博客
03-01 255
<style> .carousel { width: 520px; height: 280px; border: 3px solid #000; overflow: hidden; position: relative; margin: 50px auto; } .carousel ul { ..
webgoat-server-8.2.2.zip
最新发布
07-21
解压即可得到webgoat-server-8.2.2.jar
html5轮播图片循环代码
12-24
以下是一个基本的HTML5轮播图片循环的代码示例： ```html <!DOCTYPE html> <html> .slideshow { position: relative; width: 100%; height: 300px; overflow: hidden; } .slideshow img { position: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值