左右圆形倒影双图

美化源代码
复制源代码
源代码
<section style="box-sizing: border-box;"><section style="display: inline-block;width: 100%;vertical-align: top;border-style: solid;border-width: 0px;border-radius: 0px;border-color: rgb(62, 62, 62);box-sizing: border-box;"><section style="box-sizing: border-box;"><section style="display: inline-block;vertical-align: top;width: 50%;box-sizing: border-box;"><section style="box-sizing: border-box;"><section style="box-sizing: border-box;"><p style="box-sizing: border-box;"><br></p></section></section><section style="text-align: right;margin-top: 10px;margin-right: 0%;margin-left: 0%;box-sizing: border-box;transform: translate3d(-10px, 0px, 0px);"><section style="max-width: 100%;vertical-align: middle;display: inline-block;width: 25%;box-sizing: border-box;"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="100%" style="vertical-align: middle;max-width: 100%;box-sizing: border-box;"><defs></defs><path d="M815.2 607.5c0 61.1-49.5 110.6-110.6 110.6s-61.1-221.2 0-221.2 110.6 49.5 110.6 110.6z" fill="#FFE244" style="box-sizing: border-box;"></path><path d="M704.6 738.1c-13.3 0-37.9-6.2-53.1-47.7-8.2-22.2-12.7-51.7-12.7-82.9s4.5-60.7 12.7-82.9c15.3-41.5 39.8-47.7 53.1-47.7 72 0 130.6 58.6 130.6 130.6s-58.6 130.6-130.6 130.6z m0-221.2c-8.8 0-25.8 32-25.8 90.6s17 90.6 25.8 90.6c50 0 90.6-40.6 90.6-90.6s-40.7-90.6-90.6-90.6z" fill="#000000" style="box-sizing: border-box;"></path><path d="M234.3 605.1c0 61.1 49.5 110.6 110.6 110.6s61.1-221.2 0-221.2S234.3 544 234.3 605.1z" fill="#FFE244" style="box-sizing: border-box;"></path><path d="M344.9 735.7c-72 0-130.6-58.6-130.6-130.6s58.6-130.6 130.6-130.6c13.3 0 37.9 6.2 53.1 47.7 8.2 22.2 12.7 51.7 12.7 82.9s-4.5 60.7-12.7 82.9c-15.3 41.5-39.8 47.7-53.1 47.7z m0-221.2c-50 0-90.6 40.6-90.6 90.6s40.6 90.6 90.6 90.6c3.8 0 10.1-6.6 15.6-21.5 6.5-17.6 10.2-42.8 10.2-69.1 0-58.6-17.1-90.6-25.8-90.6z" fill="#000000" style="box-sizing: border-box;"></path><path d="M728.7 494.3h-40c0-93.8-76.3-170.1-170.1-170.1s-170.1 76.3-170.1 170.1h-40c0-115.8 94.2-210.1 210.1-210.1s210.1 94.3 210.1 210.1z" fill="#000000" style="box-sizing: border-box;"></path></svg></section></section><section style="box-sizing: border-box;transform: translate3d(-20px, 0px, 0px);-webkit-transform: translate3d(-20px, 0px, 0px);-moz-transform: translate3d(-20px, 0px, 0px);-ms-transform: translate3d(-20px, 0px, 0px);-o-transform: translate3d(-20px, 0px, 0px);"><section style="text-align: right;font-size: 12px;box-sizing: border-box;"><p style="display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><span style="color:#141e1b;"><strong>诗经</strong></span></p><p style="display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><br></p><p style="color: rgb(115, 124, 123);display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><span style="">文字字数要少</span></p><p style="color: rgb(115, 124, 123);display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><span style="">晓看天色暮看云，</span></p><p style="color: rgb(115, 124, 123);display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><span style="">行也思君，</span></p><p style="color: rgb(115, 124, 123);display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><span style="">坐也思君。</span><strong style="box-sizing: border-box;"></strong></p><p style="color: rgb(115, 124, 123);display: inline-block;width: 1em;margin-right: 0.2em;margin-left: 0.2em;float: right;clear: none;box-sizing: border-box;"><br></p><p style="color: rgb(115, 124, 123);font-size: 0px;line-height: 0;min-height: 0px;box-sizing: border-box;"><br></p></section></section></section><section style="display: inline-block;vertical-align: top;width: 50%;box-sizing: border-box;"><section style="margin: 10px 0%;font-size: 24px;text-align: center;-webkit-box-reflect: below 0px -webkit-linear-gradient(top, transparent, transparent 80%, rgba(255, 255, 255, 0.8));box-sizing: border-box;"><section style="display: inline-block;vertical-align: middle;box-sizing: border-box;"><section style="box-sizing: border-box;width: 3em;height: 3em;border-width: 3px;border-style: solid;border-color: rgb(255, 255, 255);border-radius: 100%;transform: rotate(0deg);"><section style="overflow: hidden;margin-right: auto;margin-left: auto;width: 100%;padding-bottom: 100%;height: 0px;background-position: 50% 50%;background-size: cover;border-radius: 100%;box-sizing: border-box;"><img src="https://cdn.file.mixinnet.cn/htmlImg/d97f2f78c33c28c20a3d4e312fcd5e06.png" style="background-position: center center;background-repeat: no-repeat;background-size: cover;margin-left: auto;margin-bottom: -2em;" data-brush="img" data-copyrighted="184"></section></section><section style="box-sizing: border-box;margin: auto 0.75em auto auto;width: 6em;height: 6em;border-radius: 100%;"><section style="overflow: hidden;margin-right: auto;margin-left: auto;width: 100%;padding-bottom: 100%;height: 0px;background-position: 50% 50%;background-size: cover;border-radius: 100%;box-sizing: border-box;"><img src="https://cdn.file.mixinnet.cn/htmlImg/334e7c2af2d272095ad3ac36c8c48d47.png" data-brush="img" data-copyrighted="184"></section></section></section></section></section></section></section></section>
可视化
诗经
文字字数要少
晓看天色暮看云，
行也思君，
坐也思君。
专注移动端开发

快速链接

关于我们

115cms信息内容管理系统
