标签：大海 动画 move 50% transform 波浪 0px 255
<!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>
标签：大海,动画,move,50%,transform,波浪,0px,255 来源： https://www.cnblogs.com/lain520/p/16294821.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。