用html写早安,晚安动画

@import url("https://fonts.googleapis.com/css?family=Sanchez"); * { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { content: ""; position: absolute; } html { font-family: "Sanchez", serif; } .container-wrapper { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } html { -webkit-transition: background-color 3s ease; -o-transition: background-color 3s ease; transition: background-color 3s ease; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; background-color: #fff7f4; } .container { width: 450px; height: 450px; position: relative; } .container-night { background-color: #e4ecff; } .circle-container { width: 450px; height: 450px; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: absolute; overflow: hidden; z-index: 100; } .sky { position: absolute; width: 100%; height: 55%; top: 0; background: -webkit-gradient( linear, left top, left bottom, from(#feb8b0), to(#fef9db) ); background: -webkit-linear-gradient(#feb8b0, #fef9db); background: -o-linear-gradient(#feb8b0, #fef9db); background: linear-gradient(#feb8b0, #fef9db); z-index: 1; overflow: hidden; } .sky-night { position: absolute; width: 100%; height: 100%; background: -webkit-gradient( linear, left top, left bottom, from(#4c3f6d), color-stop(#6c62bb), to(#93b1ed) ); background: -webkit-linear-gradient(#4c3f6d, #6c62bb, #93b1ed); background: -o-linear-gradient(#4c3f6d, #6c62bb, #93b1ed); background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed); opacity: 0; -webkit-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } .sky-night-fade { opacity: 1; } @-webkit-keyframes sky-night { 0% { background: -webkit-gradient( linear, left top, left bottom, from(#feb8b0), to(#fef9db) ); background: -webkit-linear-gradient(#feb8b0, #fef9db); background: linear-gradient(#feb8b0, #fef9db); } 100% { background: -webkit-gradient( linear, left top, left bottom, from(#4c3f6d), to(#96b5ee) ); background: -webkit-linear-gradient(#4c3f6d, #96b5ee); background: linear-gradient(#4c3f6d, #96b5ee); } } @keyframes sky-night { 0% { background: -webkit-gradient( linear, left top, left bottom, from(#feb8b0), to(#fef9db) ); background: -webkit-linear-gradient(#feb8b0, #fef9db); background: -o-linear-gradient(#feb8b0, #fef9db); background: linear-gradient(#feb8b0, #fef9db); } 100% { background: -webkit-gradient( linear, left top, left bottom, from(#4c3f6d), to(#96b5ee) ); background: -webkit-linear-gradient(#4c3f6d, #96b5ee); background: -o-linear-gradient(#4c3f6d, #96b5ee); background: linear-gradient(#4c3f6d, #96b5ee); } } .sun-container { z-index: 10; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; width: 290px; height: 290px; /* background-color: rgba(255, 0, 255, 0.2);*/ -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out; } .sun { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: -webkit-gradient( linear, left top, left bottom, from(#fefefe), to(#fffbe8) ); background: -webkit-linear-gradient(#fefefe, #fffbe8); background: -o-linear-gradient(#fefefe, #fffbe8); background: linear-gradient(#fefefe, #fffbe8); cursor: pointer; z-index: 10; } .boat { position: absolute; width: 50px; height: 0px; border-top: 7px solid #bb7074; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 280px; /* right: -50px;*/ top: -5px; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: boat 5s infinite; animation: boat 5s infinite; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; -webkit-transition: all 4s ease-in-out; -o-transition: all 4s ease-in-out; transition: all 4s ease-in-out; } .boat-sail { margin-left: -350px; } .boat, .boat:before, .boat:after { position: absolute; z-index: 200; } @-webkit-keyframes boat { 0% { -webkit-transform: rotate(1deg)translate(2px, 0px); transform: rotate(1deg)translate(2px, 0px); } 25% { -webkit-transform: rotate(-1deg) translate(-2px, -2px); transform: rotate(-1deg) translate(-2px, -2px); } 50% { -webkit-transform: rotate(1deg) translate(1px, 0px); transform: rotate(1deg) translate(1px, 0px); } 75% { -webkit-transform: rotate(-1deg) translate(-1px, -2px); transform: rotate(-1deg) translate(-1px, -2px); } 100% { -webkit-transform: rotate(1deg) translate(2px, 0px); transform: rotate(1deg) translate(2px, 0px); } } @keyframes boat { 0% { -webkit-transform: rotate(1deg)translate(2px, 0px); transform: rotate(1deg)translate(2px, 0px); } 25% { -webkit-transform: rotate(-1deg) translate(-2px, -2px); transform: rotate(-1deg) translate(-2px, -2px); } 50% { -webkit-transform: rotate(1deg) translate(1px, 0px); transform: rotate(1deg) translate(1px, 0px); } 75% { -webkit-transform: rotate(-1deg) translate(-1px, -2px); transform: rotate(-1deg) translate(-1px, -2px); } 100% { -webkit-transform: rotate(1deg) translate(2px, 0px); transform: rotate(1deg) translate(2px, 0px); } } .boat:before, .boat:after { width: 0; height: 0; border: 0 solid transparent; } .boat:before { bottom: 8px; right: -6px; border-right-width: 15px; border-left-width: 0px; border-bottom: 30px solid #bb7074; } .boat:after { bottom: 8px; right: 11px; border-right-width: 0px; border-left-width: 20px; border-bottom: 48px solid #bb7074; } .ocean { position: absolute; width: 100%; height: 45%; bottom: 0; background: #ceefe8; z-index: 200; -webkit-animation: ocean-top 3s infinite; animation: ocean-top 3s infinite; opacity: 1; -webkit-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; } .animation-stop { -webkit-animation: ocean-top 3s forwards; animation: ocean-top 3s forwards; height: 42%; } .ocean-night { position: relative; width: 100%; height: 100%; background: -webkit-gradient( linear, left top, left bottom, from(#8da6e6), to(#788cc9) ); background: -webkit-linear-gradient(#8da6e6, #788cc9); background: -o-linear-gradient(#8da6e6, #788cc9); background: linear-gradient(#8da6e6, #788cc9); opacity: 0; -webkit-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; z-index: 500; } .ocean-night-fade { opacity: 1; } .moon { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: -webkit-gradient( linear, left top, left bottom, from(#fefefe), to(#fffbe8) ); background: -webkit-linear-gradient(#fefefe, #fffbe8); background: -o-linear-gradient(#fefefe, #fffbe8); background: linear-gradient(#fefefe, #fffbe8); opacity: 0; left: 80px; margin-top: 90px; -webkit-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } .moon-fade { opacity: 0.3; -webkit-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s; } .ocean:before, .ocean:after { width: 100%; bottom: 0; position: absolute; z-index: 200; } .ocean:before { height: 75%; background: #baeced; -webkit-animation: ocean-middle 3s infinite; animation: ocean-middle 3s infinite; } .ocean:after { height: 50%; background: #ace6f1; -webkit-animation: ocean-bottom 2s infinite; animation: ocean-bottom 2s infinite; } @-webkit-keyframes ocean-top { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes ocean-top { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes ocean-middle { 0% { height: 75%; } 50% { height: 77%; -webkit-transform: rotate(2deg); transform: rotate(2deg); } 100% { height: 75%; } } @keyframes ocean-middle { 0% { height: 75%; } 50% { height: 77%; -webkit-transform: rotate(2deg); transform: rotate(2deg); } 100% { height: 75%; } } @-webkit-keyframes ocean-bottom { 0% { height: 50%; } 50% { height: 52%; -webkit-transform: rotate(-2deg)
上一篇:深入浅出 -- 系统架构之负载均衡Nginx资源压缩


下一篇:基于微信小程序的自习室预约系统的设计与实现