动画
图片
代码
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;position: relative;background-color: #319fad;overflow: hidden;}.sun {position: relative;top: 100px;left: 100px;width: 300px;height: 300px;}.sun::after,.sun::before {content: "";display: block;position: absolute;top: 50%;left: 50%;border-radius: 50%;}.sun::after {width: 180px;height: 180px;background-color: rgba(255,255,255,0.6);animation: sun 1.5s linear infinite alternate;}.sun::before{width: 100px;height: 100px;background-color: rgba(255,255,255,0.8);animation: sun 1.5s linear infinite alternate;}.wave {width: 100%;height: 250px;position: absolute;bottom: 0px;left: 0px;}.wave img {width: 100%;position: absolute;bottom: 0px;animation: wave 1.5s linear infinite alternate;}.wave img:first-child{width: 100%;position: absolute;bottom: 0px;animation: wave 1s linear infinite alternate;}@keyframes sun {from {transform:translate(-50%,-50%) scale(1);box-shadow: 0px 0px 10px rgba(255,255,255,0.5);}to {transform: translate(-50%,-50%) scale(1.2);box-shadow: 5px 5px 40px rgba(255,255,255,0.5);}}@keyframes wave{from{bottom: 0px;}to{bottom: -50px;}}</style>
</head>
<body><div class="sun"></div><div class="wave"><img src="images/1.png" ><img src="images/2.png" ></div>
</body>
</html>