项目中的动画实例
代碼實現：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><meta name="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="css/style.css"><style>.father {width: 300px;height: 280px;border: 1px solid red;margin: 300px auto;overflow: hidden;position: relative;color: #000000;font-size: 13px;}.father img {width: 300px;height: 200px;background: yellow;}.bk {width: 300px;height: 200px;background: #00aced;opacity: 0.5;position: absolute;top: -200px;left: 0;transition: all 2s;}.father:hover .bk {top: 0px;}.son {width: 300px;height: 80px;background: #00b488;}.son1 {animation: sport 2s ease-in-out;width: 300px;height: 80px;text-align: center;color: #fff;padding-top: 18px;}@keyframes sport {0% {transform: translateY(100px);opacity: 1;}100% {transform: translateY(0px);opacity: 1}}</style> </head><body><div class="father"><img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3835734796,1631195054&fm=26&gp=0.jpg"><div class="bk"></div><div class="son"><div class="son1"><div>標題標題</div><p>內容內容內容內容內容內容內容內容</p></div></div></div> </body></html>原理說明：
在最外層設置一個d盒子，限制高度，寬度，超出隱藏，并且使用relative定位。
上面hover效果： 使用transition 改變top的值來實現，先將元素放在框外面，然后hover的時候將top值變成0；
下面自動上移： 使用animation動畫，設置動畫初始向下Y軸下方100px,然后動畫結束，變回原來的位置。
<!DOCTYPE html> <html dir="ltr" lang="en"><head><meta charset="utf-8" /><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="author" content="webhivers" /><meta name="format-detection" content="telephone=no"><meta name="keywords" content="" /><meta name="description" content="" /><title>arrow-right</title><style>.container {width: 1000px;margin: 0 auto;}.move {position: relative;margin-left: -16px;animation-name: move;animation-duration: 1.5s;/*完成一個周期需要的時間 */animation-fill-mode: both;/* 屬性規定動畫在播放之前或之后，其動畫效果是否可見none 不改變默認行為forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。both 向前和向后填充模式都被應用 */animation-iteration-count: infinite;/* font-style: inherit; */animation-timing-function: linear;animation-delay: 0.9s;}@keyframes move {0% {left: 0%;opacity: 0;}70% {left: 70%;opacity: 0.7}100% {left: 100%;opacity: 0;}}</style></head><body><div class="container"><div style="width:300px;"><div class="move"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2219285114,2237515136&fm=26&gp=0.jpg"alt=""></div></div></div> </body></html>原理說明：
在最外層設置一個盒子寬度，里面使用動畫改變left的值。
總結
- 上一篇： 丛林传奇读后感300字
- 下一篇： IE10,IE9透明元素无法点击