html5+css3實現2D動畫效果演示
阿新 • • 發佈:2019-01-08
<span style="font-size:18px;">@charset "utf-8"; *{margin:0px;padding:0px;} figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:left;} figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微軟雅黑";margin:5px 10px;} @media screen and (max-width:600px){ figyre{width:100%} } @media screen and (min-width:601px) and (max-width:1000px){ figure{width:50%} } @media screen and (min-width:1001px){ figure{width:33.33%} } figure figcaption p,h2,div{transition:all 0.35s;} figure img{transition:all 0.35s;opacity:0.8;} .test1{background:#2f0000;} .test1 figcaption p{background:#fff;color:#333;margin:5px;text-align:center;transform:translate(-130px,0px);} .test1 figcaption{padding:20px;} .test1:hover figcaption p{transform:translate(0px,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 img{transform: translate(-50px,0); opacity:0.5;} .test2{background:#030;} .test2 figcaption{width:100%;height:100%;} .test2 figcaption h2{margin-left:15%;margin-top:15%;} .test2 figcaption p{margin-left:15%; transform:translate(0px,50px);opacity:0;} .test2 figcaption div{border:2px solid #FFF;width:80%;height:80%;position:absolute;top:10%;left:10%;transform:translate(0px,-350px) rotate(0deg);} .test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);} .test2:hover img{opacity:0.5;transform:translate(-50px,0px);} .test2:hover figcaption p{transform:translate(0px,0px);opacity:1;} .test3{background:#F30;} .test3 figcaption{top:30%;left:15%;} .test3 figcaption p{ transform:skew(90deg);} .test3 figcaption h2{ transform:skew(0deg);} .test3:hover figcaption p{ transform:skew(0deg); transition-delay:0.1s;} .test3:hover figcaption h2{ transform:skew(90deg);} .test3:hover img{opacity:0.5; transform:translate(-50px,0px);} .test4{background:#030;} .test4 figcaption{width:100%;height:100%;} .test4 figcaption div{width:80%;height:80%;border:2px solid #fff;position:absolute;top:8%;left:8%;opacity:0;} .test4 figcaption h2{margin-top:20%;margin-left:15%;opacity:1;} .test4:hover figcaption div{ transform:scale(1.2,1.2);opacity:1;} .test4:hover img{ transform:scale(1.2,1.2);opacity:0.5;} .test4:hover figcaption h2{ transform:scale(1.2,1.2);opacity:0.5;}</span>