纯CSS3动效

首先,什么是CSS3不能做的目前?(①不能控制滚动条scroll ②渐变没有动画效果)

使用原则:渐进式增强以及优雅的降级,因为在目前的浏览器环境下,对CSS3的支持有一些差异。不过相信这些差异随着时间的推移可以忽略。现在我们需要考虑如果浏览器不支持当前的CSS3特性,网站是否可以正常使用(所谓优雅降级)。这里记录一些常见的动效,并使用纯css实现。

demo1:图片浏览

点击左边的小图,显示对应的大图

HTML标签:

<dl id="gallery">
 <dt><a href="#thumb-1"><img src="img/thumb-1.jpg" alt=""/></a></dt>
 <dd id="thumb-1"><img src="img/1.jpg" alt=""/></dd>
 <dt><a href="#thumb-2"><img src="img/thumb-2.jpg" alt=""/></a></dt>
 <dd id="thumb-2"><img src="img/2.jpg" alt=""/></dd>
 <dt><a href="#thumb-3"><img src="img/thumb-3.jpg" alt=""/></a></dt>
 <dd id="thumb-3"><img src="img/3.jpg" alt=""/></dd>
</dl>

CSS部分:

 dl#gallery{position: relative;margin:10px auto;width:1200px;}
 dl#gallery dt img{display: block;text-align: center;color:white;padding:10px 0;}
 dl#gallery dd { position: absolute;top:0;left:250px;opacity: 0;transition: 0.85s opacity linear;}
 dl#gallery dd img{display: block;}
 dl#gallery dt:active + dd { opacity: 1; }
 dd#thumb-1:target,dd#thumb-2:target,dd#thumb-3:target{opacity: 1;}

demo2:鼠标移到图片弹出一个标题

HTML:

<figure>
 <img src="img/1.jpg" alt="北京现代ix25">
 <figcaption>北京现代ix25</figcaption>
 </figure>
 <figure>
 <img src="img/2.jpg" alt="北京现代ix25">
 <figcaption>北京现代ix25</figcaption>
</figure>

CSS:

* {margin: 0; padding: 0;}
 html{font-size:62.5%;}/*浏览器默认1em=16px 这里转化成16*0.625=10px 方便后面设置rem */
 figure { float: left;margin-right: 10px; }
 figure, figure img { width: 800px; height: 600px; overflow: hidden;}
 figcaption {
 font-style: italic; 
 background: rgba(0,0,0,0.4);
 font-size: 2rem; 
 padding: 0.8rem;
 text-align: center;
 color: #fff;
 position: relative;
 bottom: 649px;
 transition: .8s bottom;
 }
 figure:hover figcaption{bottom: 609px;}

demo3:图片卡片扇形效果

HTML:

<div id="carfan">
 <img src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <img src="img/5.jpg" alt="">
</div>

CSS:

 #carfan img{width:640px;height:480px;}
 #carfan{margin:0 auto;width:704px;}
 #carfan img{border:32px solid #ffe;box-shadow: 12px 12px 10px rgba(0,0,0,0.2);position: absolute;
 transition: 2s;
 transform-origin: 300px 1000px;
 }
 #carfan:hover img:first-child{transform: rotate(15deg);}
 #carfan:hover img:last-child{transform: rotate(-15deg);}

demo4:slide,自动滚动,鼠标移上去停止

HTML:

<div id="slideshow">
 <figure id="imagestrip">
 <img src="img/1.jpg" alt="">
 <img src="img/2.jpg" alt="">
 <img src="img/3.jpg" alt="">
 <img src="img/4.jpg" alt="">
 <img src="img/5.jpg" alt="">
 <img src="img/1.jpg" alt="">
 </figure>
</div>

CSS:

@keyframes slider {
 0%{transform: translateX(0);}
 10%{transform: translateX(0);}
 20%{transform: translateX(-400px);}
 30%{transform: translateX(-400px);}
 40%{transform: translateX(-800px);}
 50%{transform: translateX(-800px);}
 60%{transform: translateX(-1200px);}
 70%{transform: translateX(-1200px);}
 80%{transform: translateX(-1600px);}
 90%{transform: translateX(-1600px);}
 100%{transform: translateX(-2000px);}
 }

 #slideshow{position: relative;background-color: #000;overflow: hidden;}
 #imagestrip,#slideshow{box-sizing: border-box;}
 #imagestrip img{width:400px;height:300px;vertical-align: bottom;float: left;}
 #imagestrip{position: absolute;width:2400px;}
 #slideshow{width:400px;height:300px;margin:0 auto;}

 #imagestrip{animation: slider 12s infinite;}
 #slideshow:hover #imagestrip{animation-play-state: paused; opacity: 0.5;}
 #slideshow:hover:before{content: "▶"; font-size: 100px; color: rgba(255,255,255, 0.7); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

demo5:图片点击lightbox效果

HTML:

<dl id="gallery">
 <dt><a href="#col1"><img src="img/thumb-1.jpg" alt=""></a></dt>
 <dd id="col1"><a href="#"><img src="img/1.jpg" alt=""></a></dd>
 <dt><a href="#col2"><img src="img/thumb-2.jpg" alt=""></a></dt>
 <dd id="col2"><a href="#"><img src="img/2.jpg" alt=""></a></dd>
 <dt><a href="#col3"><img src="img/thumb-3.jpg" alt=""></a></dt>
 <dd id="col3"><a href="#"><img src="img/3.jpg" alt=""></a></dd>
 <dt><a href="#col4"><img src="img/thumb-4.jpg" alt=""></a></dt>
 <dd id="col4"><a href="#"><img src="img/4.jpg" alt=""></a></dd>
</dl>

CSS:

#gallery a{display: block;width:100%;height: 100%;text-align: center;}
 #gallery a img{vertical-align: bottom;}
 #gallery dd img{opacity: 0;}
 #gallery dt{width:240px}
 #gallery dd{position:absolute;visibility: hidden;top:50%;transform: translateY(-50%);width:100%;height: 100%;text-align: center;}
 @keyframes blowup {
 0% { width: 0; height: 0; opacity: 0; }
 30% { width: 640px; height: 0; opacity: 0; }
 60% { width: 640px; height: 480px; opacity: 0; margin: 20px; }
 100% { width: 640px; height: 480px; opacity: 1; margin: 20px; }
}

 #gallery dd:target{visibility: visible;background: rgba(0,0,0,0.6);transition: 0.5s background linear;}
 #gallery dd:target a img{animation: blowup 1s forwards;}

本文参考《Pro CSS3 Animation》

css3
作者:张雪飞
出处:https://zhangxuefei.site/p/1693
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注