CSS动画实例:图文切换
先准备好一张图片,在页面中放置一个类名为container的层作为图文容器,在该层中再定义两个层:一个类名为image-box的层放置图片,一个类名为text-desc的层放置文本描述,HTML代码描述如下:
<div class="container">
<div class="image-box">
<img src="hhl.jpg" alt="黄鹤楼">
</div>
<div class="text-desc">
<h3>黄鹤楼公园</h3>
<p>黄鹤楼是国家首批AAAAA级景区,中国旅游胜地四十佳,武汉市的城市标志。位于武昌蛇山之巅,有近1800余年的历史,为“江南三大名楼”之首,有“天下江山第一楼”美誉。在中国历史上留下大量传说故事和脍炙人口的诗篇。<br>
网址:<a href="http://www.cnhhl.com/">http://www.cnhhl.com/</p>
</div>
</div>
分别为这3个层和层中元素标签img、h3、p等定义CSS样式规则如下:
.container
{
margin: 0 auto;
width: 500px;
height: 350px;
position: relative;
overflow: hidden;
border: 4px solid rgba(255, 0, 0, 0.9);
}
img
{
max-width: 100%;
vertical-align: middle;
}
h3
{
font-size: 20px;
margin: 5px 0 10px;
text-align:center;
}
p
{
line-height: 20px;
font-size: 16px;
margin-bottom: 15px;
}
.text-desc
{
position: absolute;
left: 0;
top: 0;
background-color: #fff;
height: 100%;
opacity: 0;
width: 100%;
padding: 20px;
}
现要实现鼠标悬停时图文切换的效果。初始时,容器中显示图片,文本被隐藏,当鼠标悬停于图片上时,图片略微放大,文本从顶部向下显示出来,覆盖图片(图片作为背景在文本后面);当鼠标移离时,文本被隐藏,图片显示出来,效果如图1所示。
<!DOCTYPE HTML> <html> <head> <title>图文切换</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { margin: 0 auto; width: 500px; height: 350; position: relative; overflow: hidden; border: 4px solid rgba(255, 0, 0, 0.9); } img { max-width: 100%; vertical-align: middle; } h3 { font-size: 20px; margin: 5px 0 10px; text-align:center; } p { line-height: 20px; font-size: 16px; margin-bottom: 15px; } .text-desc { position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px; } .container img { transition: 0.5s; position: relative; width: 100%; right: 0; } .container:hover img { right: 50%; } .container .text-desc { opacity: 0; transition: 0.5s; transform: rotateY(90deg); transform-origin: right center 0; left:auto; right:0; width: 50%; padding: 18px 10px; } .container:hover .text-desc { opacity: 1; transform: rotateY(0deg); } </style> </head> <body> <div class="container"> <div class="image-box"> <img src="hhl.jpg" alt="黄鹤楼"> </div> <div class="text-desc"> <h3>黄鹤楼公园</h3> <p>黄鹤楼是国家首批AAAAA级景区,中国旅游胜地四十佳,武汉市的城市标志。位于武昌蛇山之巅,有近1800余年的历史,为“江南三大名楼”之首,有“天下江山第一楼”美誉。在中国历史上留下大量传说故事和脍炙人口的诗篇。<br> 网址:<a href="http://www.cnhhl.com/">http://www.cnhhl.com/</p> </div> </div> </body> </html>View Code [p] 若修改上面HTML文件中的“top: -100%; ”为“top: 100%;”,其余部分保持不变,则在浏览器中呈现出如图2所示的切换效果,此时文本内容从底部向上推出。
<!DOCTYPE HTML> <html> <head> <title>图文切换</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { margin: 0 auto; max-width: 1060px; } img { max-width: 100%; vertical-align: middle; } h3 { font-size: 20px; margin: 3px 0 6px; } p { line-height: 20px; font-size: 14px; margin-bottom: 15px; } ul { width: 100%; position: relative; overflow: hidden; border: 4px solid rgba(255, 0, 0, 0.9); } li { float: left; width: 31.33%; margin: 10px 1%; list-style: none; } .text-desc { position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 10px; } .btn { display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s; } .btn:hover { background-color: transparent; color: #4d92d9; transition: 0.4s; } .port { width: 100%; position: relative; overflow: hidden; border: 4px solid rgba(255,0, 255, 0.9); } .port.effect1 img { transition: 0.5s; } .port.effect1:hover img { transform: scale(1.2); } .port.effect1 .text-desc { opacity: 0.9; top: -100%; transition: 0.5s; padding: 45px 20px 20px; } .port.effect1:hover .text-desc { top: 0; } .port.effect2 img { transition: 0.5s; transform: rotateY(360deg) scale(1, 1); } .port.effect2:hover img { transform: rotateY(0deg) scale(0, 0); } .port.effect2 .text-desc { transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px; } .port.effect2:hover .text-desc { transform: rotateY(360deg) scale(1, 1); opacity: 1; } .port.effect3 img { transition: 0.5s; position: relative; width: 100%; right: 0; } .port.effect3:hover img { right: 50%; } .port.effect3 .text-desc { opacity: 0; transition: 0.5s; transform: rotateY(90deg); transform-origin: right center 0; left:auto; right:0; width: 50%; padding: 18px 10px; } .port.effect3:hover .text-desc { opacity: 1; transform: rotateY(0deg); } </style> </head> <body> <div class="container"> <ul> <li> <div class="port effect1"> <div class="image-box"> <img src="mltc.png" alt="木兰天池"> </div> <div class="text-desc"> <h3>木兰天池</h3> <p>木兰天池景区,是国家5A级景区,也是国家森林公园,木兰天池-相传是木兰将军的外婆家,是木兰将军小时候生活、习武的地方。</p> <a href="http://www.mltc.cn/" class="btn">进入官网</a> </div> </div> </li> <li> <div class="port effect2"> <div class="image-box"> <img src="mls.jpg" alt="木兰山"> </div> <div class="text-desc"> <h3>木兰山</h3> <p>荆楚名岳-木兰山位于黄陂区北部,是流芳千古的木兰将军故里,因木兰将军而得名。是国家5A级景区,国家地质公园、木兰文化之源、千年宗教圣地。</p> <a href="http://www.whmls.cn/" class="btn">进入官网</a> </div> </div> </li> <li> <div class="port effect3"> <div class="image-box"> <img src="mlyws.png" alt="木兰云雾山"> </div> <div class="text-desc"> <h3>木兰云雾山</h3> <p>享有“西陵胜地、楚北名区、陂西垂障、汉地祖山”美誉的云雾山,景区占地25平方公里。</p> <a href="http://www.yunwushan.cn/" class="btn">进入官网</a> </div> </div> </li> </ul> </div> </body> </html>View Code
在浏览器中打开包含这段HTML代码的html文件,可以呈现如图12所示的图文切换效果。
[/p]图12 多个图文切换效果
- Vue-router结合transition实现app前进后退动画切换效果的实例
- Android实现移动小球和CircularReveal页面切换动画实例代码
- iOS-小Demo--动画效果实例切换图片
- 使用CSS实现outline切换的动画效果
- Css实现页内多个div之间的切换动画
- CSS动画实例:旋转的圆角正方形
- vue操作动画的记录animate.css实例代码
- js+css实例超漂亮tab切换选项卡代码
- [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery的animate函数实现图文切换动画效果
- css动画的实例讲解(逆战班)
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- CSS Clip剪切元素动画实例
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- [Android实例] ViewPager多页面滑动切换以及动画效果
- swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css。
- vue路由+子路由+具名路由demo实例(结合animate.css动画)
- CSS动画中的Animation和Transition全属性实例
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器