css布局中秋节快乐卡片封面效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局中秋节快乐卡片封面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"); .container .left-content .arrow-container, .container .left-content .photo, .container .left-content, .container .right-content, .container { border: 0px solid #660; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Ubuntu"; } body { height: 100vh; min-height: 400px; display: flex; justify-content: center; align-items: center; min-width: 992px; } .container { width: 100vw; min-width: 992px; max-width: 1440px; height: 400px; border-radius: 5px; display: flex; justify-content: center; align-items: stretch; padding: 40px; } .container .left-content, .container .right-content { position: relative; width: 50%; display: flex; align-items: center; } .container .left-content { justify-content: flex-end; } .container .left-content .photo { position: relative; width: 300px; height: 300px; background-color: #333; border-radius: 50%; background: url(//repo.bfw.wiki/bfwrepo/image/607d718558628.png); background-size: cover; background-position: 65% center; box-shadow: 0px 0px 20px -2px #000; z-index: 1; } .container .left-content .photo .moon { position: absolute; top: 5%; left: 5%; width: 25%; height: 25%; background: #ffab2c; border-radius: 50%; } .container .left-content .photo .moon .date { position: relative; top: 50%; left: 50%; width: max-content; font-size: 16px; font-weight: bold; z-index: 0; } .container .left-content .photo .moon .date:before { position: absolute; top: 10px; left: 0px; content: ""; width: calc(100% + 10px); height: 8px; background: #fff; z-index: -1; } .container .left-content .photo .ribbon { position: absolute.........完整代码请登录后点击上方下载按钮下载查看
网友评论0