表白爱心信封动画效果
代码语言:html
所属分类:表白
代码描述:表白爱心信封动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ padding:0; margin:0; height:100vh; display:flex; justify-content:center; align-items:center; background-image: linear-gradient( 45deg, #ffc2cd 25%, #fcfeff 25%, #fcfeff 50%, #ffc2cd 50%, #ffc2cd 75%, #fcfeff 75%, #fcfeff 100% ); background-size: 56.57px 56.57px; margin: 2em; text-align: center; font-size: 22pt; } .card{ width:0; height:0; border-top:100px solid #eee; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom:100px solid #ccc; border-right:170px solid #ddd; border-left:170px solid #ccc; } .heart{ width:32px; height:32px; background-color:#ff3838; transform:translate(580%,-20%) rotate(45deg); animation:beat 1s linea.........完整代码请登录后点击上方下载按钮下载查看
网友评论0