css3中一些常用的动画效果

来源：互联网发布：淘宝售后高编辑：程序博客网时间：2024/05/16 09:29

1.动画效果一：鼠标放上去，后面的背景图放大到一定程度，下面的有个内容盒子，以一定的速度从下向上运动，并且盒子的背景颜色逐渐加深。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.big {width: 420px;height: 372px;overflow: hidden;position: relative;border: 1px solid #000;}.bigone {position: absolute;top: 0;left: 0;}.bigone .pic {width: 100%;height: 100%;overflow: hidden;}.bigone .pic img {width: 100%;height: 100%;transition: all 0.5s;}.big:hover img {transform: scale(1.5);}.bigone .dl {position: absolute;bottom: 0;left: 0;width: 100%;height: 109px;background: rgba(0,0,0,0.4);}.bigone .dl p {font-size: 30px;color: #fff;padding: 20px;}.bigtwo {width: 100%;height: 260px;position: absolute;bottom: -120px;left: 0;background: rgba(0,0,255,0);transition: all 0.5s;}.bigtwo p {font-size: 18px;color: rgba(255,255,255,0);padding: 10px;}.big:hover .bigtwo {transform: translateY(-120px);background: rgba(0,0,255,0.7);}.big:hover p {color: rgba(255,255,255,1);}</style></head><body><div class="big"><div class="bigone"><div class="pic"><img src="1.jpg" alt=""></div><div class="dl"><p>这是一段话</p></div></div><div class="bigtwo"><p>这是遮罩层</p></div></div></body></html>

效果二：鼠标放到盒子上有一个类似于开门的效果，并且下面的背景颜色和字体的颜色会有一个渐变的过程。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.big {width: 500px;height: 400px;position: relative;overflow: hidden;}.big:after,.big:before {content: "";display: block;width: 50%;height: 100%;background: rgba(0,0,0,0.4);position: absolute;top: 0;transition: all 1s;}.big:after {left: 0;}.big:before {right: 0;}a {position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;width: 200px;height: 200px;border-radius: 50%;background: rgba(0,0,0,0.7);color: #fff;text-decoration: none;transition: all 1s;}.small {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}span {font-size: 16px;color: #fff;transition: all 1s;}p {font-size: 12px;color: #fff;text-align: center;transition: all 1s;}.big:hover:after {left: -50%;}.big:hover:before {right: -50%;}.big:hover a {background: yellow;}.big:hover span,.big:hover p {color: red;}</style></head><body><div class="big"><a href="#"><div class="small"><span>这是一个盒子</span><p>摄影</p></div></a></div></body></html>

阅读全文

0 0