你的位置:首页 > 软件开发 > 网页设计 > css3+javascript实现翻页幻灯片

css3+javascript实现翻页幻灯片

发布时间:2017-06-21 00:00:33
先上效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type=&qu ...

先上效果图

css3+javascript实现翻页幻灯片

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style type="text/css">			*{				margin: 0;				padding: 0;			}			#content{				width: 500px;				height: 300px;				margin: 40px auto;				position: relative;				transform-style: preserve-3d;			}			#content>div{				width: 100%;				height: 100%;				position: absolute;				transform-origin: center bottom;			}			#content img{				width: 100%;				height: 100%;			}			#next{				position: absolute;				top:190px;				left: calc(33% - 60px);			}			#prev{				position: absolute;				top: 190px;				left: calc(68% + 30px);			}			@keyframes next{  //创建一个动画这是一个翻到下面的效果				from{					-wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/					opacity: 1; //初始透明为1				}				to{					-webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/					opacity: 0; //结束透明为0				}			}			@keyframes prev{ //创建一个由上边翻到上边的动画				0%{					-webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */					opacity:0;    //初始为透明				}				57%				{					-webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */					opacity:1; //透明已经为1 了				}				66%				{					-webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */				}				74%				{					-webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */				}				81%				{					-webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */				}				87%				{					-webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */				}				92%				{					-webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */				}				96%				{					-webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */				}				100%				{					-webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */				}

原标题:css3+javascript实现翻页幻灯片

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。