Web鍓嶇鍒朵綔鐐叿鐗规晥鍜屽姩鎬乮con
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web鍓嶇鍒朵綔鐐叿鐗规晥鍜屽姩鎬乮con相关的知识，希望对你有一定的参考价值。
鏍囩锛?a href='http://www.mamicode.com/so/1/iconfont' title='iconfont'>iconfont
amp block linear lock 鐜 棰滆壊 round child1.box-shadow灞炴€ч櫎浜嗗父鐢ㄤ簬闃村奖鏁堟灉銆佸崱鐗囩瓑鍩虹浣跨敤澶栵紝杩樺彲浠ョ敤浜庡疄鐜版瘮杈冪偒閰风殑鐗规晥锛?/p>
绫讳技杩欐牱鐨勬兂杩囬兘鏄彲浠ラ€氳繃box-shadow灞炴€у埗浣滅殑锛涜祫鏂欐潵婧愪簬CSDN锛氬緢灏忕櫧鐨勫皬鐧?nbsp;
闄勪笂浠栫殑浠ｇ爜锛?/p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } body{ background: #000; } div{ width: 300px; height: 300px; position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); border-radius: 50%; box-shadow: inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 0px 0px 150px #f0f, inset -10px 0px 150px #0ff, 0px 0px 50px #fff, -10px 0px 50px #f0f, 10px 0px 50px #0ff; } </style> </head> <body> <div></div> </body> </html> ———————————————— 鐗堟潈澹版槑锛氭湰鏂囦负CSDN鍗氫富銆屽緢灏忕櫧鐨勫皬鐧姐€嶇殑鍘熷垱鏂囩珷锛岄伒寰?CC 4.0 BY-SA 鐗堟潈鍗忚锛岃浆杞借闄勪笂鍘熸枃鍑哄閾炬帴鍙婃湰澹版槑銆?鍘熸枃閾炬帴锛歨ttps://blog.csdn.net/qq_35401191/article/details/86666497
閫氳繃inset灞炴€э紝鍒堕€犲唴闃村奖鍜屼笉鍔爄nset灞炴€у埗浣滃闃村奖锛涚劧鍚庡绛夌殑10PX -10PX 鐢ㄤ笉鍚岀殑棰滆壊锛屽彲浠ヨ宸﹀彸鏁堟灉瀵圭О鍙堢偒褰╋紱绗笁涓狿X鎴戣皟浜嗕竴涓嬶紝搴旇鏄痵pread 闃村奖鐨勫ぇ灏忥紱
浠栬繖涓皟鐨勫凡缁忔尯濂界湅鐨勶紝鎴戞槸鐩存帴鎷挎潵鐢ㄤ簡锛?/p>
2.CSS+DIV鍙互鍒朵綔鍔ㄦ€佺殑寰堝彲鐖辩殑icon鍥炬牱锛屽鍥炬墍绀?img alt="鎶€鏈浘鐗? src="http://image.mamicode.com/info/201912/20191231185534308768.gif" />
鍏朵腑涓嬮洦鐨勬晥鏋滀唬鐮侊細
STEP1: 鏁翠綋HTML鏋舵瀯 <div class="icon rainy"> <div class="cloud"></div> <div class="rain"></div> </div> STEP2: 鐢–SS缁樺埗浜戞湹鍥炬爣 CSS浠ｇ爜濡備笅 body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; font-family: 鈥楻oboto鈥? sans-serif; text-align: center; background-color: currentColor; } .icon { position: relative; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */ } .cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; } .cloud:after { content: 鈥樷€? position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff; } .cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite; } .cloud:nth-child(2):after { background: #fff; } .rain{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor; } .rain:after { content: 鈥樷€? position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; /*璁剧疆鍔ㄧ敾 rain */ } STEP3: 涓嬮洦鍔ㄧ敾 /* 涓嬮洦鍔ㄧ敾 Animations */ @keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } }
浠ｇ爜鏉ユ簮浜庯細https://mp.weixin.qq.com/s?src=3×tamp=1577761115&ver=1&signature=ORKpJuGleWEShD7zQ-50LmtGSsjAQK-kiHIFR7PY8TKMcMKiJjPrIPOMwPx4P4a-IsnECk6ZtSToTlqzLytFsSShJHVYbU*LNKcdviDybbM7Qbs0ud5-aJv1VPp0bZ77YcIEZBz4BAMIKyaXDNULjwySojjEEJbH0dkmYAnMGBo=
涓嶈繃濂藉儚澶嶅埗鎵撳紑杩囨湡浜嗭紝鏄潵婧愪簬寰俊鎺ㄩ€佺殑锛?/p>
杩欎釜鏁堟灉浣跨敤鐨勫湴鏂圭洰鍓嶆垜杩樻病鏈夌敤鍒帮紝鍏跺疄鎰熻浠ｇ爜鎸哄鐨勶紝鍡氨涓嶆槸寰堟柟渚夸娇鐢紱鐒跺悗锛岀幇鍦ㄥ墠绔殑鍥剧墖鍩烘湰閮芥槸鐩存帴PS鎶犲浘鎴栬€卛confont閲岄潰鎵剧殑鍥剧墖鏀句笂鍘荤殑锛屽彲鑳芥槸鐩墠鐨勫伐浣滅幆澧冨姝わ紝涔熻浠ュ悗鑳界敤鍒板惂銆?/p>
以上是关于Web鍓嶇鍒朵綔鐐叿鐗规晥鍜屽姩鎬乮con的主要内容，如果未能解决你的问题，请参考以下文章
odoo 瀵煎叆鏂囦欢xml鍒朵綔,浣跨敤csv 鏂囦欢鍒朵綔xml 鏂囦欢
BZOJ 1057: [ZJOI2007]妫嬬洏鍒朵綔 鎮嚎娉曟眰鏈€澶у瓙鐭╅樀+dp
鍓嶇 http鍗忚 鍥涘ぇ鐗规€? web鏈川 -鍝嶅簲鐘舵€佺爜 鍒楄〃鏍囩 琛ㄥ崟鎿嶄綔 form琛ㄥ崟 # 44