css3实现图片动态提示效果

网页自适应与过渡效果实现

最新推荐文章于 2021-11-23 16:31:43 发布

weixin_34406796

最新推荐文章于 2021-11-23 16:31:43 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/fcx09/p/4812242.html

本文介绍如何通过CSS媒体查询实现网页自适应布局，并详细解释了transition动画、transform变形及关键属性应用，包括translate、rotate、scale和skew等效果，通过实例展示了如何为不同屏幕尺寸调整布局和动画。

transform:元素变形处理有四种状态 translate(平移) Rotate(旋转) scale(缩放) skew( 斜切) 当使用Rotate时需要有transform_origin 配合

transition：动画处理 property 检索设置对象中参与过度 duration 过度动画持续时间 timing-function 动画类型 delay 对象过度时间

简单的自适应：@media screen and ()

<!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>无标题文档</title>
<style>
figure,figcaption,h2,p,img{
    margin:0px;
    padding:0px;
    }
figure{
    width:33.33%;
    float:left;
    position:relative;}
figure img{
    width:550px;
    height:550px;
    opacity:0.8;
    transition:all 0.35s;
    } 
figure figcaption p{ transition:all 0.35s}
figcaption{
    position:absolute;
    top:0px;
    left:0px;
    }
@media screen and (min-width:1001px){
    figure{
        width:33.33%;
        }
    }
@media screen and (min-width:601px) and (max-width:1000px){
    figure{
        width:50%;
        }
    }
@media screen and (max-width:600px){
        figure{
        width:100%;
        }
    }
.test1 {
    }
.test1 figcaption{
    padding:5px;
        }
.test1 figcaption p{
    background-color:#FFF;
    color:#333;
    text-align:center;
    margin:3px;
    transform:translate(-220px,0px)
    }
.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 figcaption p{
    transform:translate(0px,0px);
        }
.test1 img:hover{ transform:translate(-50px,0px); opacity:0.5;}

.test2{
    }
.test2 figcaption{
    width:100%;
    height:100%;
    }
.test2 figcaption h2{ margin-top:25%; margin-left:20%;}
.test2 figcaption p{margin-left:20%; transform:translate(0px,50px); opacity:0;}
.test2 figcaption div{ border:2px solid #FFF;width:50%; height:50%; position:absolute; top:25%;left:20%; transform:translate(0px,-450px) rotate(0deg);}
.test2:hover figcaption div{ transform:translate(0px,0px) rotate(360deg);} 
.test2:hover img{ opacity:0.5;}
.test2:hover figcaption p{ transform:translate(0px,0px); opacity:1;}
.test3 figcaption{
     top:30%;
     left:15%;}
.test3 figcaption h2{ transform:skew(90deg);}
.test3 figcaption p{ transform:skew(90deg);}
.test3:hover img{ opacity:0.5;}
.test3:hover figcaption h2{ transform:skew(0deg);}
.test3:hover figcaption p{ transform:skew(0deg);}
</style>
</head>

<body>
<figure class="test1">
<img src="image/head.jpg" />
<figcaption>
<h2>这是一个小美女</h2>
<p>图片注解1</p>
<p>图片注解2</p>
<p>图片注解3</p>
</figcaption>
</figure>
<figure class="test2">
<img src="image/head.jpg" />
<figcaption>
<h2>这是一个小美女</h2>
<p>图片注解1</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="image/head.jpg" />
<figcaption>
<h2>这是一个小美女</h2>
<p>图片注解</p>
</figcaption>
</figure>
</body>
</html>