纯CSS完成的无侵入的卡盘(幻灯片)

日期:2021-03-15 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

卡盘,也便是幻灯片,它应当是全自动播发,但现阶段css是没法保证全自动播发(将会会让你心寒),因此它不可该叫幻灯片,但我扔这么叫法它为幻灯片。假如你觉得能够用脚本制作来完成,嗯,地球人都了解,明显违反了大家的主题,纯css的,无侵入的。好像我题目党了,但请你耐下脾气来听我说。
今日不经意在經典论坛看到1个帖子,纯CSS的照片展现实际效果,它是运用锚点来完成,艺术创意十分好,但立刻令我激动,由于该实际效果有缺陷。
Opera失效
没法纪录情况
沒有hover实际效果
这些更是我想说的,我想填补的。
最先,大家让它来适配全部A级访问器。实际上基本原理很简易,既然应用锚点,大家应当记得css3有个伪类:target(非IE核心访问器都适用),让它来操纵,不就更好?
<style>
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
#b:target{
margin:⑵60px 0 0;
}
#c:target{
margin:⑸20px 0 0;
}
</style>
<div class="macji">
<ul>
<li id="a">
<img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" />
</li>
</ul>
<ol>
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
</ol>
</div>
检测详细地址
难题2,完成纪录情况,那大家一样能够用伪类:target来完成,IE系列访问器不适用。
<style>
/* 省略1些css,下面这行是最重要的 */
a.item:hover, :target a.item{
background:#f60;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a href="#a" class="item">1</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" /></a>
</li>
<li id="b">
<a href="#b" class="item">2</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" />
</li>
<li id="c">
<a href="#c" class="item">3</a>
<a href="#"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
检测详细地址
最终1个难题,hover实际效果,这可并不是简易的:hover便可以完成,大家不可以在li上给hover(这样当电脑鼠标历经li就hover了),大家只能在数据上hover(<a href=”#a” class=”item”>1</a>)随后来危害它针对的照片,貌似不能能纯CSS完成,但的确能够完成,用“ + ”来完成。因为用到:target和“+”,因此仅有Firefox、Opera适用。-__-
<style>
.macji{
position:relative;
}
.macji ul{
width:250px;
height:260px;
overflow:hidden;
}
ul li{
height:260px;
}
.macji a{
position:absolute;
left:0;
top:0;
z-index:2;
}
a.item{
z-index:10!important;
left:10px;
top:230px;
display:block;
width:20px;
height:20px;
border:solid 1px #777;
line-height:20px;
text-align:center;
color:#fff;
background:#aaa;
}
#b a.item{
left:31px;
}
#c a.item{
left:51px;
}
a.item:hover,:target a.item{
background:#f60;
}
#a:target a.pic,#b:target a.pic,#c:target a.pic{
z-index:3;
}
/* 基本原理是用肯定精准定位z-index来显示信息,另 “ + ” 只对连接点的下1个弟兄连接点合理 */
a.item:hover + a.pic{
z-index:9!important;
}
/* for ie */
a.pic{
* position:static;
}
</style>
<div class="macji">
<ul>
<li id="a">
<a href="#a" class="item">1</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/digital/3Cpj_250X260_080904_fox.jpg" />
</li>
<li id="b">
<a href="#b" class="item">2</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/chl/smbzb_250x260_080818_ng.jpg" /></a>
</li>
<li id="c">
<a href="#c" class="item">3</a>
<a href="#" class="pic"><img src="http://pics.taobaocdn.com/bao/album/b2cdigital/guoqin_080919_250x260_xy.jpg" /></a>
</li>
</ul>
</div>
最后演试,编码完成是很简易,重要是是不是想到到基本原理。举1反3,可能获得更多你要想的結果。不知道不觉已经是国庆节了,祝大伙儿节日开心!

提醒:您能够先改动一部分编码再运作
上一篇:8个简易好用的CSS秘诀 返回下一篇:没有了