css实现文字心形布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现文字心形布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet"> <style> html { height: 100%; } body { background-color: mistyrose; font-family: 'Montez', cursive; } #container { width: 1000px; height: 500px; margin: 0 auto; } span { color: transparent; } #left { float: left; height: 500px; width: 500px; shape-outside: polygon(51.33% 12px, 100.03% 2.17%, 97.87% 19.59%, 92.11% 16.84%, 83.26% 12.61%, 72.27% 12.33%, 59.8% 17.47%, 53.86% 27.8%, 52.21% 37.23%, 58.14% 52.53%, 68.47% 64.73%, 99% 87%, 217px 86.93%); } #right { float: right; height: 500px; width: 500px; shape-outside: polygon(70.33% 13px, 0.92% 2.68%, 0.92% 19.57%, 5.42% 18.47%, 9.85% 15.59%, 23.11% 11.65%, 32.26% 13.97%, 38.67% 16.73%, 43.4% 23.07%, 47.06% 29.8%, 46.41% 44.23%, 38.14% 57.33%, 26.67% 68.73%, 0.4% 87%, 353px 84.73%); } p { text-align: justify; color: #922a2a; position: relative; } p:before { content: "Hello World"; position: absolute; font-size: 75px; top: 20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0