大海波浪动画
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { /*让html和body与浏览器宽高一致*/ width: 100%; height: 100%; background-color: #0EA9B1; overflow: hidden; /*隐藏右边滑动框*/ } img { /*让image与浏览器宽度一致*/ width: 100%; height: auto; position: absolute; left: 0; bottom: 0; } img:first-child { /*引用move的动画*/ animation: move 2.2s linear infinite; } img:last-child { /*引用move的动画*/ animation: move 1.8s linear infinite; } div { width: 100px; height: 100px; margin: 100px; /*子决父相*/ position: relative; } div::before, div::after { content: ""; width: 50px; height: 50px; /*定位后，宽高为父标签的50%*/ position: absolute; top: 50%; left: 50%; /*定位后，宽高为父标签的50%后，再走自己大小的-50%（也可以用margin走-50%） transition是过渡 transform才用于移动或动画*/ transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.8); /*元素本身的颜色和透明度*/ animation: sun 2s linear infinite; /*引用sun动画*/ } div::after { content: ""; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.6); /*元素本身的颜色和透明度*/ animation: sun 3s linear infinite; /*引用sun动画*/ } @keyframes move { /*move的动画*/ 0% { bottom: 0; } 50% { bottom: -50px; } 100% { bottom: 0; } } @keyframes sun { /*move的动画*/ 0% { transform: translate(-50%, -50%) scale(1); /*由于动画缩放用到transform 把之前的样式层叠了 所以这里要增加transform:translate */ box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7); /*给元素加阴影*/ } 50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0px 0px 30px 5px rgba(255, 255, 255, 0.7); } 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7); } } </style>
</head>
<body> <div></div> <img src="images/1.png" alt=""> <img src="images/2.png" alt=""> </body>
</html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { /*让html和body与浏览器宽高一致*/ width: 100%; height: 100%; background-color: #0EA9B1; overflow: hidden; /*隐藏右边滑动框*/ } img { /*让image与浏览器宽度一致*/ width: 100%; height: auto; position: absolute; left: 0; bottom: 0; } img:first-child { /*引用move的动画*/ animation: move 2.2s linear infinite; } img:last-child { /*引用move的动画*/ animation: move 1.8s linear infinite; } div { width: 100px; height: 100px; margin: 100px; /*子决父相*/ position: relative; } div::before, div::after { content: ""; width: 50px; height: 50px; /*定位后，宽高为父标签的50%*/ position: absolute; top: 50%; left: 50%; /*定位后，宽高为父标签的50%后，再走自己大小的-50%（也可以用margin走-50%） transition是过渡 transform才用于移动或动画*/ transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.8); /*元素本身的颜色和透明度*/ animation: sun 2s linear infinite; /*引用sun动画*/ } div::after { content: ""; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.6); /*元素本身的颜色和透明度*/ animation: sun 3s linear infinite; /*引用sun动画*/ } @keyframes move { /*move的动画*/ 0% { bottom: 0; } 50% { bottom: -50px; } 100% { bottom: 0; } } @keyframes sun { /*move的动画*/ 0% { transform: translate(-50%, -50%) scale(1); /*由于动画缩放用到transform 把之前的样式层叠了 所以这里要增加transform:translate */ box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7); /*给元素加阴影*/ } 50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0px 0px 30px 5px rgba(255, 255, 255, 0.7); } 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.7); } } </style>
</head>
<body> <div></div> <img src="images/1.png" alt=""> <img src="images/2.png" alt=""> </body>
</html>
标签：大海,动画,move,50%,transform,波浪,0px,255 来源： https://www.cnblogs.com/lain520/p/16294821.html