css实现小船漂浮在海浪中的动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"><title>HTML5</title> <style> .ship-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 50%; overflow: hidden; width: 600px; height: 600px; background-color: #aae7ff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .ship-wrap .wave { position: absolute; width: 1200px; -webkit-transform-origin: center center; transform-origin: center center; } .ship-wrap .wave:before { content: ""; position: absolute; left: 0; top: -10px; right: 0; background-repeat: repeat; height: 10px; background-size: 20px 20px; background-image: -webkit-radial-gradient(10px -5px circle, rgba(0, 0, 0, 0) 12px, #91b9ff 12px); background-image: radial-gradient(circle at 10px -5px, rgba(0, 0, 0, 0) 12px, #91b9ff 12px); } .ship-wrap .wave:after { content: ""; position: absolute; left: 0; top: -15px; right: 0; background-repeat: repeat; height: 15px; background-size: 40px 20px; background-image: -webkit-radial-gradient(10px 15px circle, #91b9ff 12px, rgba(0, 0, 0, 0) 13.04348px); background-image: radial-gradient(circle at 10px 15px, #91b9ff 12px, rgba(0, 0, 0, 0) 13.04348px); } .ship-wrap .wave1 { height: 600px; background-color: #91b9ff; opacity: .8; -webkit-animation: wave 115s ease-in-out infinite; animation: wave1 15s ease-in-out infinite; bottom: -461.53846px; z-index: 3; } .ship-wrap .wave2 { height: 600px; background-color: #91b9ff; opacity: .4; left: -30%; -webkit-animation: wave220s ease-out infinite; animation: wave2 20s ease-out infinite; bottom: -444.44444px; z-index: 1; } .ship-wrap .main { width: 150px; height: 33.33333px; background-color: #684000; position: absolute; left: 0; right: 0; margin: auto; bottom: 133.33333px; z-index: 2; -webkit-animation: ship 3s linear infinite; animation: ship 3s linear infinite; } .ship-wrap .main:before, .ship-wrap .main:after { content: ''; position: absolute; top: 0; width: 0; height: 0; border: 0; } .ship-wrap .main:before { left: -33.33333px; border-top: 33.33333px solid #684000; border-left: 33.33333px solid transparent; border-bottom: 33.33333px solid transparent; } .ship-wrap .main:after { right: -33.33333px; border-top: 33.33333px solid #684000; border-bottom: 33.33333px solid transparent; border-right: 33.33333px solid transparent; } .ship-wrap .main-mast { width: 3.75px; height: 150px; background-color: #684000; position: absolute; right: 20%; bottom: 33.33333px; z-index: 2; } .ship-wrap .main-course { width: 75px; height: 120px; background-color: #fff; position: absolute; right: 20%; top: -142.85714px; border-top-left-radius: 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0