利用css3的几种提示效果

来源：互联网发布：ios编程语言编辑：程序博客网时间：2024/06/07 23:00

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html" charset="UTF-8"><meta name="viewport" content="width=device-width,inatial-scale=1"><title>css3图片动态提示效果</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><figure class="test1">    <img src="img/1.jpg"><figcaption><h2>图片标题</h2><p>图片注解</p><p>图片注解</p><p>图片注解</p></figcaption></figure><figure class="test2">    <img src="img/1.jpg"><figcaption>    <div></div><h2>旋转动画</h2><p>飞来飞去</p></figcaption></figure><figure class="test3">    <img src="img/1.jpg"><figcaption><h2>斜切动画</h2><p>图片注解</p><p>图片注解</p></figcaption></figure><figure class="test4">    <img src="img/1.jpg"><figcaption>    <div></div><h2>图片缩放</h2><p>图片注解</p><p>图片注解</p></figcaption></figure><figure class="test5">    <img src="img/1.jpg"><figcaption>    <span>这是一张图片</span>    <div></div><h2>旋转</h2><p>利用旋转提供额外信息</p></figcaption></figure><figure class="test6">    <img src="img/1.jpg"><figcaption>    <div class="one"></div>    <div class="two"></div><h2>缩放</h2><p>缩放的简单应用</p></figcaption></figure></body></html>

css文件：

figure{position: relative;width: 33.33%;height: 350px;float: left;overflow: hidden;}figure p, figure img,figure span,figure div{transition:all 0.35s;}figure img{height: 350px;width: 100%;max-width: 100%;}figure img{opacity: 0.8;}figcaption{position: absolute;top: 0;left: 0;color: #fff;}.test1{background-color: red;}.test1 figcaption p{background-color: #fff;color: #2F0000;margin: 3px;text-align: center;transform: translateX(-120px);}.test1:hover figcaption p{transform: translateX(0);}.test1 figcaption{padding:20px;}.test1 figcaption p:nth-of-type(1){transition-delay: 0.05s}.test1 figcaption p:nth-of-type(2){transition-delay: 0.1s}.test1 figcaption p:nth-of-type(3){transition-delay: 0.15s}.test1:hover img{transform: translateX(-50px);    opacity:0.5;}.test2{background-color: #030;}.test2 figcaption{width: 100%;height: 100%;}.test2 figcaption p{transform: translateY(45px);opacity: 0;}.test2 figcaption div{border: 2px solid #fff;width: 80%;height:80%;/*margin: 10% auto;*/position: absolute;top: 10%;left: 10%;transform: translateY(-400px) rotate(0deg);}.test2:hover figcaption div{   transform: translateY(0) rotate(-360deg);/*要设置初始值*/}.test2:hover figcaption p{   transform: translateY(0);   opacity: 1;}.test2:hover img{opacity: 0.5;transform: translateX(-50px);}.test2 figcaption h2{margin-top: 15%;margin-left: 15%;}.test2 figcaption p{margin-left: 15%;margin-top: 3px;}.test3{background-color: #000;}.test3:hover img{opacity: 0.5;}.test3 figcaption{top: 30%;left: 15%;}.test3 figcaption h2,.test3 figcaption p{transform: skew(90deg);}/* h2不会斜切?*/.test3 figcaption p{margin-top: 5px;margin-left: 15%;}.test3:hover figcaption h2,.test3:hover figcaption p{   transform: skew(0deg);}.test4{background-color:#000;}.test4:hover img{    opacity: 0.5;    transform: scale(1.2,1.2);}.test4 figcaption{width:100%;height: 100%;}.test4 figcaption div{border: 2px solid #fff;width: 80%;height:80%;position: absolute;top: 10%;left: 10%;transform: scale(1.3,1.3);}.test4 figcaption h2{margin-top: 15%;}.test4 figcaption P,.test4 figcaption h2{margin-left: 15%;transform: scale(1.2,1.2);opacity: 0;}.test4:hover figcaption P,.test4:hover figcaption h2{transform: scale(1.0,1.0);opacity: 1;}.test4 figcaption img{transform: scale(1.0,1.0);}.test4:hover figcaption div{transform: scale(1.0,1.0);}.test5{background-color: #000;}.test5:hover img{opacity: 0.5;}.test5 figcaption h2{margin-top: 10%;}.test5 figcaption p,.test5 figcaption h2{width: 100%;margin-left: 20%;transform: translateY(20px);opacity: 0;}.test5:hover figcaption p,.test5:hover figcaption h2{   transform: translateY(0);   opacity: 1;}.test5 figcaption{width: 100%;height: 100%;transform-origin: left bottom;}.test5 figcaption div{border: 2px solid #fff;border-left: none;border-right: none;/*border-bottom: none;*/width: 120%;height:200px;opacity: 0.4;background-color: #fff;position: absolute;top:350px;transform-origin: left top;transform: rotate(0deg);color: red;}.test5 figcaption span{    display: block;    color: #fff;    position: absolute;    left: 60%;    bottom: 80px;    opacity: 0;    transform: translateY(200px);}.test5:hover figcaption span{transform: translateY(40px);opacity: 1;transition-delay: 0.2s;}.test5:hover figcaption div{    transform-origin: left top;transform: rotate(-15deg);}.test6{background-color: #000;}.test6:hover img{opacity: 0.5;}.test6 figcaption{width: 100%;height: 100%;}.test6 figcaption h2{margin-top: 20%;}.test6 figcaption p,.test6 figcaption h2{margin-left: 20%;transform: scale(0,0) rotate(0deg);}.test6:hover figcaption p,.test6:hover figcaption h2{margin-left: 20%;transform: scale(1.2,1.2) rotate(360deg);transition-delay: 0.15s;}.test6 figcaption div.one{position: absolute;top: 10%;left: 15%;width: 70%;height: 80%;border: 1px solid #fff;}.test6 figcaption div.two{position: absolute;top: 15%;left: 10%;width: 80%;height: 65%;border: 1px solid #fff;}.test6 figcaption div.one{border-bottom: none;border-top: none;transform: scale(0,0) rotate(0deg);}.test6:hover figcaption div.one{transform: scale(1.2,1.2) rotate(360deg);}.test6 figcaption div.two{border-right: none;border-left: none;transform: scale(0,0) rotate(0deg);}.test6:hover figcaption div.two{transform: scale(1.2,1.2) rotate(360deg);/*transition-delay: 0.25s;*/}@media screen and (min-width: 1001px) {figure{width: 33.33%;}}@media screen and (min-width: 500px) and (max-width: 1001px) {figure{width: 50%;}}@media screen and (max-width: 500px) {figure{width: 100%;}}

0 0