css实现 情人节爱情狗狗表单动画效果代码
代码语言:html
所属分类:表白
代码描述:css实现 情人节爱情狗狗表单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet"> <style> body { background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%); } h1 { font-family: 'Cedarville Cursive', cursive; } #puppy { position: absolute; left: 40%; top: -40px; right: 80%; width: 400px; height: 400px; } #left-eye, #right-eye { z-index: 40; width: 18%; top: 40px; position: relative; right: -100px; height: 20%; -webkit-transform: rotate(10deg); border-radius: 180px / 260px; background: #2b1d0e; } #right-eye { top: -20px; position: relative; left: 40px; } #right-ear, #left-ear { z-index: -10; position: relative; top: -160px; left: -80px; width: 25%; height: 40%; -webkit-transform: rotate(38deg); border-radius: 180px / 260px; background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); } #right-ear { -webkit-transform: rotate(-38deg); top: -320px; left: 140px; } #nose { z-index: -10; position: relative; top: 110px; left: 30px; width: 30%; height: 34%; -webkit-transform: rotate(100deg); border-radius: 180px / 260px; background: #000; -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */ animation: mymove 5s infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove { from { left: 0px; } to { left: 200px; } } @keyframes mymove { from { top: 110px; } to { top: 100px; } } .pupil, .nose-twinkle { width: 10px; height: 10px; background: #ccc; top: 15px; right: -15px; border-radius: 100px; z-index: 100; position: relative; } .nose-twinkle { width: 5px; height: 10px; border-radius: 180px / 260px; } #face { position: relative; top: 50px; width: 40%; -webkit-transform: rotate(-20deg); height: 60%; border-radius: 200px / 260px; background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); z-index: 15; } #upper-body { position: relative; top: -440px; left: -30px; width: 55%; height: 55%; border-radius: 120px; background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); z-index: 10; } #lower-body { z-index: 5; position: relative; top: -480px; left: -28%; right: 50%; margi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0