你以为 CSS 只是个简单的布局？装逼指南了解一下
生活随笔
收集整理的這篇文章主要介紹了
你以为 CSS 只是个简单的布局？装逼指南了解一下
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
裝逼指南
本文中，所有的圖形都是在單個標簽內實現的，大量使用了 CSS3 中的 ::before 、::after 偽元素，transparent 、border，多重線性與徑向漸變，多重內外陰影，如果你的效果不盡人意，請嘗試在 Chrome 瀏覽器下預覽。
裝逼技巧
本文所有圖形都會有個容器 <div class="css-cell"></div>包裹，其樣式結構如下：
.css-cell{position: relative;width: 100%;height: 300px; }復制代碼所有圖形都是在容器內實現的，其結構如下：
<!--heart--> <div class="css-cell"><div class="heart"></div> </div>復制代碼天氣那一塊有部分會多一個容器，其結構如下：
<div class="css-cell "><div class="breeze-container"><div class="breeze"></div></div> </div>復制代碼為了方便起見，下面圖形的具體實現，我只會貼出對應的類相應的樣式代碼~
裝逼實戰
- 愛心
利用 div 的正方形和偽類的圓型組合而成，具體代碼如下：
/*heart*/ .heart{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%) rotate(45deg);background: red;width: 100px;height: 100px; } .heart:before, .heart:after {content: '';position: absolute;top: 0;left: -50px;width: 100px;height: 100px;border-radius: 50%;background: red; } .heart:after{top: -50px;left: 0; }復制代碼- 氣泡懸浮框
利用 border 結合 transparent 特性實現，代碼如下：
/*bubbly*/ .bubbly{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);background: #00ccbb;border-radius: 8px;width: 200px;padding: 40px 10px;text-align: center;color: white;font-size: 20px; } .bubbly:after {content: '';position: absolute;bottom: 0;left: 50%;border: 34px solid transparent;border-top-color: #00ccbb;border-bottom: 0;border-left: 0;margin: 0 0 -34px -17px; }復制代碼- 切角
利用使用線性漸變實現的，代碼如下：
/*notching*/ .notching{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;padding: 60px 20px; } .notching{background:linear-gradient(135deg, transparent 15px, deeppink 0)top left,linear-gradient(-135deg, transparent 15px, deeppink 0)top right,linear-gradient(-45deg, transparent 15px, deeppink 0)bottom right,linear-gradient(45deg, transparent 15px, deeppink 0)bottom left;background-size: 50% 50%;background-repeat: no-repeat; }復制代碼- 弧形切角
使用徑向漸變實現，具體實現如下：
/*arc*/ .arc{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 80px;padding: 80px; } .arc {background:radial-gradient(circle at top left,transparent 15px, yellowgreen 0) top left,radial-gradient(circle at top right,transparent 15px, yellowgreen 0) top right,radial-gradient(circle at bottom right,transparent 15px, yellowgreen 0) bottom right,radial-gradient(circle at bottom left,transparent 15px, yellowgreen 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat; }復制代碼- 梯形
利用偽類加旋轉透視實現，具體實現如下：
/*trapezoid*/ .trapezoid{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 160px;padding: 60px; } .trapezoid:before{content:"";position: absolute;top: 0; right: 0;bottom: 0; left: 0;transform:perspective(40px) scaleY(1.3) rotateX(5deg);transform-origin: bottom;background:dodgerblue;z-index:-1; }復制代碼- 餅圖
利用偽類、線性漸變、旋轉實現，具體代碼如下：
/*pie*/ .pie{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;height:200px;border-radius:50%;text-align: center;background-color:yellowgreen;overflow:hidden;background-image: linear-gradient(to right, transparent 50%, #655 0);cursor:pointer; } .pie:before{content:"";position:absolute;top:0;left:50%;width:50%;height:100%;background-color: inherit;transform-origin: left;z-index:-1;transform:rotate(.1turn); } .pie:hover:before{transition:all 1s;transform:rotate(.45turn); }復制代碼- 平行四邊形
利用偽類、拉伸實現，實現過程如下：
/*parallelogram*/ .parallelogram{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;height:120px;} .parallelogram:before{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color:#00aabb;z-index:-1;transform: skew(.08turn); }復制代碼- 折角
利用切角、偽類、漸變、旋轉實現，代碼如下：
/*corner*/ .corner{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 120px;height:120px;padding:40px;background:linear-gradient(-150deg,transparent 1.5em, yellowgreen 0);border-radius:8px; } .corner:before{content: '';position: absolute;top: 0; right: 0;background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;width: 1.73em;height: 3em;transform: translateY(-1.3em) rotate(-30deg);transform-origin: bottom right;border-bottom-left-radius: inherit;box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15); }復制代碼- 純 CSS 方案實現背景變暗效果（hover按鈕觸發）
鼠標移入
利用 box-shadow 實現，具體代碼如下：
/*spectiveBlur*/ .spectiveBlur{position: absolute;top: 50%;left: 50%;width: 220px;height:160px;transform: translate(-50%, -50%);border-radius:10px;overflow:hidden;background:#E91E63;cursor:pointer;transition: transform .2s; } .spectiveBlur:hover{box-shadow:0 0 0 1920px rgba(0,0,0,.7);transform: translate(-50%, -50%) scale(1.2); }復制代碼- 條紋背景圖
主要是利用漸變實現，具體實現如下：
/*stripe*/ .stripe{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;height:200px;background:deeppink;border-radius:.5em;background:repeating-linear-gradient(45deg,#CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px) }復制代碼 /*wave-stripe*/ .wave-stripe{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;height:200px;border-radius:.5em;background:linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,linear-gradient(315deg, deeppink 25%, transparent 25%),linear-gradient(45deg, deeppink 25%, transparent 25%);background-size: 40px 40px; }復制代碼 /*arrow-stripe*/ .arrow-stripe{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);width: 200px;height:200px;border-radius:.5em;background:linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);background-color:#e1ebbd;background-size: 128px 128px; }復制代碼- 混合模式背景圖
- 太陽
利用線性漸變、陰影、旋轉實現，具體代碼如下：
/*sun*/ .sun{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);background:#0BF;border-radius:5px; } .sun:before{content:"";position: absolute;width: 80px;height: 80px;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius:50%;background:rgba(255, 238, 68, 1);box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;z-index:-10; } .sun:after{content:"";position: absolute;top: 50%;left: 50%;height: 160px;width: 160px;transform: translate(-50%, -50%) rotate(30deg);z-index:-100;background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),-webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);background-size: 20px 100%, 100% 20px;background-repeat: no-repeat;background-position: center center, center center;animation:sunRotate 10s linear infinite; } @keyframes sunRotate{0%{transform: translate(-50%, -50%) rotate(30deg);}100%{transform: translate(-50%, -50%) rotate(390deg);} }復制代碼- 多云
利用線性漸變、陰影、縮放實現，具體實現如下：
/*cloudy*/ .cloudy{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);background:#2EB5E5;border-radius:5px; } .cloudy:before {content: "";text-indent:23px;font-size:22px;line-height:40px;color:#333;position: absolute;height: 50px;width: 50px;background: #FFFFFF;left:30%;top:45%;transform: translate(-50%, -50%);border-radius: 50%;box-shadow:#FFFFFF 65px -15px 0 -5px,#FFFFFF 25px -25px,#FFFFFF 30px 10px,#FFFFFF 60px 15px 0 -10px,#FFFFFF 85px 5px 0 -5px,#C8C8C8 35px -35px,#C8C8C8 66px -27px 0 -5px,#C8C8C8 91px -10px 0 -8px;animation: cloudy 5s ease-in-out infinite; } .cloudy:after{content:"";position: absolute;top: 80%;left: 50%;height: 15px;width: 120px;background:rgba(0,0,0,.5);border-radius: 50%;transform: translate(-50%, -50%);animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy {50%{transform: translate(-50%, -70%);}100%{transform: translate(-50%, -50%);} } @keyframes cloudy_shadow {50%{transform: translate(-50%, -50%) scale(0.8);background:rgba(0,0,0,.2);}100%{transform: translate(-50%, -50%) scale(1);background:rgba(0,0,0,.5);} }復制代碼 /*cloudy2*/ .cloudy2{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);background:#2EB5E5;border-radius:5px; } .cloudy2:before {content: "";text-indent:23px;font-size:22px;line-height:40px;color:#333;position: absolute;height: 50px;width: 50px;background: #FFFFFF;left:30%;top:55%;transform: translate(-50%, -50%);border-radius: 50%;z-index:100;box-shadow:#FFFFFF 65px -15px 0 -5px,#FFFFFF 25px -25px,#FFFFFF 30px 10px,#FFFFFF 60px 15px 0 -10px,#FFFFFF 85px 5px 0 -5px;animation: cloudy2 5s ease-in-out infinite; } .cloudy2:after{content:"";position: absolute;top: 45%;left: 63%;height: 60px;width: 60px;z-index:10;background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);border-radius: 50%;transform: translate(-50%, -50%);box-shadow: 0 0 10px 4px #FFA563;animation: cloudy2 10s ease-in-out infinite; } @keyframes cloudy2 {50%{transform: translate(-50%, -70%);}100%{transform: translate(-50%, -50%);} }復制代碼- 雨
利用線性漸變、陰影、縮放實現，具體代碼如下：
/*rainy*/ .rainy {position: absolute;width: 3px;height: 6px;top: 30%;left: 50%;background: #CCCCCC;border-radius: 50%;animation: rainy_rain .7s infinite linear; } .rainy:before {content: "";color: #333;position: absolute;height: 50px;width: 50px;top: 30px;left: -40px;background: #CCC;transform: translate(-50%, -50%);border-radius: 50%;box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;animation: cloudy 5s ease-in-out infinite; } .rainy:after {content: "";position: absolute;top: 120px;left: 50%;height: 15px;width: 120px;background: rgba(0, 0, 0, .5);border-radius: 50%;transform: translate(-50%, -50%);animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy {50% {transform: translate(-50%, -70%);}100% {transform: translate(-50%, -50%);} } @keyframes cloudy_shadow {50% {transform: translate(-50%, -50%) scale(0.8);background: rgba(0, 0, 0, .2);}100% {transform: translate(-50%, -50%) scale(1);background: rgba(0, 0, 0, .5);} } @keyframes rainy_rain {0% {box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;}25% {box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;}26% {box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;}50% {box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;}51% {box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;}75% {box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;}76% {box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;}100% {box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;} }復制代碼- 微風
利用border、transparent、實現，這個會多一層 div.breeze-container 包裹，樣式代碼如下：
/*breeze*/ .breeze-container{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);text-align:center;font-size:200%;color:#fff;background:#00BBFF;border-radius:5px; } .breeze-container:after{content:"";position:absolute;top:58%;left:50%;transform: translate(-50%, -50%);width:6px;height:70px;background:#fff; } .breeze{position:absolute;top: 30%;left: 50%;transform: translate(-50%, -50%) rotate(1deg);border-bottom:60px solid #fff;border-left:5px solid transparent;border-right:5px solid transparent;animation: windmill 12s infinite linear;transform-origin:50.5% 62px; } .breeze:before{position:absolute;top: 75px;left: -59px;content:"";border-right:60px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(-30deg); } .breeze:after{position:absolute;top: 75px;left: -1px;content:"";border-left:60px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:rotate(30deg); } @keyframes windmill{0%{transform: translate(-50%, -50%) rotate(0deg);}100%{transform: translate(-50%, -50%) rotate(360deg);} }復制代碼- 彩虹
主要是利用border、box-shadow 實現，具體實現如下：
/*rainbow*/ .rainbow-container{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);background:#F3D166;border-radius:5px; } .rainbow{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 1px;width: 1px; } .rainbow:before{content:"";position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);height: 70px;width: 70px;border-radius: 100px 0 0 0;box-shadow:#F44336 -2px -2px 0 1px,#FF9800 -4px -4px 0 3px,#FFEB3B -6px -6px 0 5px,#8BC34A -8px -8px 0 7px,#00BCD4 -10px -10px 0 9px,#2196F3 -12px -12px 0 11px,#9C27B0 -14px -14px 0 13px;animation: rainbow 5s ease-in-out infinite; } .rainbow:after{content: "";position: absolute;top: 70px;left: 50%;height: 15px;width: 120px;background: rgba(0, 0, 0, .5);border-radius: 50%;transform: translate(-50%, -50%);animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes rainbow {50% {transform: translate(-50%, -55%) rotate(30deg);}100% {transform: translate(-50%, -50%) rotate(45deg);} } @keyframes cloudy_shadow {50% {transform: translate(-50%, -50%) scale(0.8);background: rgba(0, 0, 0, .2);}100% {transform: translate(-50%, -50%) scale(1);background: rgba(0, 0, 0, .5);} }復制代碼- 夜空
主要是利用 box-shadow 實現 ， 實現方式如下：
/*starry*/ .starry-container{position: absolute;top: 50%;left: 50%;width:200px;height:260px;transform: translate(-50%, -50%);background:#222233;border-radius:5px; } .starry{position:absolute;top: 30%;left: 40%;transform: translate(-50%, -50%);height: 4px;width: 4px;border-radius:50%;box-shadow:#FFFFFF -26px 77px 0 -1px,rgba(255,255,255,0.1) -36px 59px 0 -1px,rgba(255,255,255,0.1) -28px 89px 0 -1px,#FFFFFF -35px 20px 0 -1px,#FFFFFF 14px 100px,rgba(255,255,255,0.1) 41px 60px,#FFFFFF 34px 39px,rgba(255,255,255,0.1) 14px 45px 0 -1px,#FFFFFF 64px 12px 0 -1px,rgba(255,255,255,0.1) 32px 96px 0 -1px,#FFFFFF 64px 71px,rgba(255,255,255,0.1) 60px 18px 0 -1px,#FFFFFF 34px 9px,rgba(255,255,255,0.1) -26px 55px 0 -1px;animation: starry_star 5s ease-in-out infinite; } .starry:before{content:"";position:absolute;top: 20%;left: 50%;width:100px;height:100px;box-shadow: #FFFFFF -25px 0;transform: rotate(-5deg);border-radius: 50%;animation: starry 5s ease-in-out infinite; } @keyframes starry {50% {transform: rotate(10deg);} } @keyframes starry_star{50%{box-shadow:rgba(255,255,255,0.1) -26px 77px 0 -1px,#FFF -36px 59px 0 -1px,#FFF -28px 89px 0 -1px,rgba(255,255,255,0.1) -35px 20px 0 -1px,rgba(255,255,255,0.1) 14px 100px,#FFF 41px 60px,rgba(255,255,255,0.1) 34px 39px,#FFF 14px 45px 0 -1px,rgba(255,255,255,0.1) 64px 12px 0 -1px,#FFF 32px 96px 0 -1px,rgba(255,255,255,0.1) 64px 71px,#FFF 60px 18px 0 -1px,rgba(255,255,255,0.1) 34px 9px,#FFF -26px 55px 0 -1px;} }復制代碼- 雷電
主要是利用陰影、border實現，代碼如下：
/*thunder*/ .thunder-container {position: absolute;top: 50%;left: 50%;width: 200px;height: 260px;transform: translate(-50%, -50%);background: #444;border-radius: 5px; } .thunder {color: #333;position: absolute;height: 50px;width: 50px;top: 40%;left: 30%;background: #222;transform: translate(-50%, -50%);border-radius: 50%;box-shadow:#222 65px -15px 0 -5px,#222 25px -25px,#222 30px 10px,#222 60px 15px 0 -10px,#222 85px 5px 0 -5px;animation: cloudy 5s ease-in-out infinite; } .thunder:before {content: "";position: absolute;top: 60px;left: 60px;border-left: 0px solid transparent;border-right: 8px solid transparent;border-top: 38px solid yellow;box-shadow: yellow -7px -32px;transform:rotate(30deg);transform-origin:center -50px;animation:stormy_thunder 2s steps(1, end) infinite;; } .thunder:after {content: "";position: absolute;top: 120px;left: 64px;height: 15px;width: 120px;background: rgba(0, 0, 0, .5);border-radius: 50%;z-index:-1;transform: translate(-50%, -50%);animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy {50% {transform: translate(-50%, -30px);} } @keyframes cloudy_shadow {50% {transform: translate(-50%, 0) scale(0.8);background: rgba(0, 0, 0, .2);} } @keyframes stormy_thunder{0% { transform: rotate(30deg); opacity:1; }5% { transform: rotate(-34deg); opacity:1; }10% { transform: rotate(0deg); opacity:1; }15% { transform: rotate(-34deg); opacity:0; } }復制代碼- 大雪
利用陰影實現 ， 代碼如下：
/*snow*/ .snowy-container {position: absolute;top: 50%;left: 50%;width: 200px;height: 260px;transform: translate(-50%, -50%);text-align: center;font-size: 200%;color: #fff;background: #607D8B;border-radius: 5px; } .snowy {position: absolute;width: 4px;height: 4px;border-radius:50%;top: 30%;left: 50%;background: #fff;border-radius: 50%;animation: snowy_rain 2s infinite linear; } .snowy:before {content: "";color: #333;position: absolute;height: 50px;width: 50px;top: 30px;left: -40px;background: #eee;transform: translate(-50%, -50%);border-radius: 50%;box-shadow:#eee 65px -15px 0 -5px,#eee 25px -25px,#eee 30px 10px,#eee 60px 15px 0 -10px,#eee 85px 5px 0 -5px;animation: cloudy 5s ease-in-out infinite; } .snowy:after {content: "";position: absolute;top: 120px;left: 50%;height: 15px;width: 120px;background: rgba(0, 0, 0, .5);border-radius: 50%;transform: translate(-50%, -50%);animation: cloudy_shadow 5s ease-in-out infinite; } @keyframes cloudy {50% {transform: translate(-50%, -70%);}100% {transform: translate(-50%, -50%);} } @keyframes cloudy_shadow {50% {transform: translate(-50%, -50%) scale(0.8);background: rgba(0, 0, 0, .2);}100% {transform: translate(-50%, -50%) scale(1);background: rgba(0, 0, 0, .5);} } @keyframes snowy_rain {0% {box-shadow:rgba(255, 255, 255, 0) -10px 30px,rgba(255, 255, 255, 0) 40px 40px,rgba(255, 255, 255, .6) -50px 75px,rgba(255, 255, 255, .6) 55px 50px,rgba(255, 255, 255, .6) -18px 100px,rgba(255, 255, 255, .6) 12px 95px,rgba(255, 255, 255, .6) -31px 45px,rgba(255, 255, 255, .6) 30px 35px;}25% {box-shadow:rgba(255, 255, 255, .6) -10px 45px,rgba(255, 255, 255, .6) 40px 60px,rgba(255, 255, 255, .6) -50px 90px,rgba(255, 255, 255, .6) 55px 65px,rgba(255, 255, 255, 0) -18px 120px,rgba(255, 255, 255, 0) 12px 120px,rgba(255, 255, 255, .6) -31px 70px,rgba(255, 255, 255, .6) 30px 60px;}26% {box-shadow:rgba(255, 255, 255, .6) -10px 45px,rgba(255, 255, 255, .6) 40px 60px,rgba(255, 255, 255, .6) -50px 90px,rgba(255, 255, 255, .6) 55px 65px,rgba(255, 255, 255, 0) -18px 40px,rgba(255, 255, 255, 0) 12px 20px,rgba(255, 255, 255, .6) -31px 70px,rgba(255, 255, 255, .6) 30px 60px;}50% {box-shadow:rgba(255, 255, 255, .6) -10px 70px,rgba(255, 255, 255, .6) 40px 80px,rgba(255, 255, 255, 0) -50px 100px,rgba(255, 255, 255, .6) 55px 80px,rgba(255, 255, 255, .6) -18px 60px,rgba(255, 255, 255, .6) 12px 45px,rgba(255, 255, 255, .6) -31px 95px,rgba(255, 255, 255, .6) 30px 85px;}51% {box-shadow:rgba(255, 255, 255, .6) -10px 70px,rgba(255, 255, 255, .6) 40px 80px,rgba(255, 255, 255, 0) -50px 45px,rgba(255, 255, 255, .6) 55px 80px,rgba(255, 255, 255, .6) -18px 60px,rgba(255, 255, 255, .6) 12px 45px,rgba(255, 255, 255, .6) -31px 95px,rgba(255, 255, 255, .6) 30px 85px;}75% {box-shadow:rgba(255, 255, 255, .6) -10px 95px,rgba(255, 255, 255, .6) 40px 100px,rgba(255, 255, 255, .6) -50px 60px,rgba(255, 255, 255, 0) 55px 95px,rgba(255, 255, 255, .6) -18px 80px,rgba(255, 255, 255, .6) 12px 70px,rgba(255, 255, 255, 0) -31px 120px,rgba(255, 255, 255, 0) 30px 110px;}76% {box-shadow:rgba(255, 255, 255, .6) -10px 95px,rgba(255, 255, 255, .6) 40px 100px,rgba(255, 255, 255, .6) -50px 60px,rgba(255, 255, 255, 0) 55px 35px,rgba(255, 255, 255, .6) -18px 80px,rgba(255, 255, 255, .6) 12px 70px,rgba(255, 255, 255, 0) -31px 25px,rgba(255, 255, 255, 0) 30px 15px;}100% {box-shadow:rgba(255, 255, 255, 0) -10px 120px,rgba(255, 255, 255, 0) 40px 120px,rgba(255, 255, 255, .6) -50px 75px,rgba(255, 255, 255, .6) 55px 50px,rgba(255, 255, 255, .6) -18px 100px,rgba(255, 255, 255, .6) 12px 95px,rgba(255, 255, 255, .6) -31px 45px,rgba(255, 255, 255, .6) 30px 35px;} }復制代碼- 五角星
主要是利用border、transparent、旋轉實現，代碼如下：
/*star*/ .five-star{position: absolute;top: 35%;right: 50%;transform: translate(-50%, -50%) scale(8);width: 0;height: 0;display: block;border-left: 3.04px solid transparent;border-right: 3.24px solid transparent;border-bottom: 10px solid #98DBE3;-webkit-filter: drop-shadow(1px .5px 1px #ccc);cursor: pointer; } .five-star:before{content: "";position: absolute;top: 8.65px;left: -8.82px;width: 0;height: 0;color: #98DBE3;display: block;border-left: 12.5px solid transparent;border-right: 12.5px solid transparent;border-bottom: 9.08px solid #98DBE3;transform-origin: top center;transform: rotate(36deg); } .five-star:after{content: "";position: absolute;top: 8.65px;left: -15px;width: 0;height: 0;color: #98DBE3;display: block;border-left: 12.5px solid transparent;border-right: 12.5px solid transparent;border-bottom: 9.08px solid #98DBE3;transform-origin: top center;transform: rotate(-36deg); }復制代碼- 太極八卦
利用 box-shadow 實現 ， 代碼很簡單：
/*TaiChi*/ .TaiChi{position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;transform: translate(-50%, -50%);box-shadow:0 0 2px #ddd;border-radius:50%;background-image:radial-gradient(#000 12.5px, transparent 12.5px),radial-gradient(#fff 12.5px, transparent 12.5px),radial-gradient(#fff 50px, transparent 50px),radial-gradient(#000 50px, transparent 50px),linear-gradient(90deg,#000 100px, #fff 100px);background-position:center 50px,center -50px,center 50px,center -50px,0 0; }復制代碼- 美隊盾牌
利用 漸變 實現 ， 代碼如下：
/*captainAmerica*/ .captainAmerica{position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;transform: translate(-50%, -50%);background:linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55%);border-radius: 50%;box-shadow: 0 3px 0 #a20917,0 4px 2px 2px #eee; } .captainAmerica::before{content: '★';position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-left:-3px;width: 50px;height:50px;font-family: simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;line-height: 47px;z-index: 1;border-radius: 50%;font-size: 55px;color: #fff;text-align:center;text-shadow: 2px 1px 2px #777; }復制代碼- 紐扣
利用 漸變、陰影 實現 ， 實現方法如下：
/*button*/ .button{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 180px;height: 180px;background: #87ceeb;border-radius: 50%;box-shadow:inset 0 5px 5px #87ceeb,inset 0 17px 5px rgba(255,255,255,0.7),inset 0 -3px 3px rgba(255,255,255,0.3),inset 0 -10px 10px rgba(0,0,0,0.3),inset 0 -15px 10px #45b3e0,0 7px 10px rgba(0,0,0,0.3); } .button::before{content: '';position:absolute;top: 50%;left: 50%;width: 110px;height: 106px;margin-left: -55px;margin-top: -55px;background-image:radial-gradient(circle at 38px 38px, #333 10px, transparent 10px),radial-gradient(circle at 73px 73px, #333 10px, transparent 10px),radial-gradient(circle at 38px 73px, #333 10px, transparent 10px),radial-gradient(circle at 73px 38px, #333 10px, transparent 10px);border-radius: 50%;border-top: 1px solid rgba(0,0,0,0.6);border-bottom: 1px solid rgba(255,255,255,0.6);box-shadow:inset 0 20px 2px rgba(255,255,255,0.3),3px -15px 7px -4px rgba(0,0,0,0.3),0 -14px 10px 5px #45b3e0,0 2px 5px 5px #87ceeb,0 10px 5px 5px rgba(255,255,255,0.6); } .button::after{content: '';position:absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin-left: -25px;margin-top: -23px;background-image:linear-gradient(to right, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%),linear-gradient(to bottom, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%);border-radius: 50%;transform: rotate(45deg); }復制代碼- Chrome
利用漸變實現 , 具體如下：
/*chrome*/ .Chrome{position: absolute;top: 50%;left: 50%;width: 180px;height: 180px;transform: translate(-50%, -50%);box-shadow:0 0px 4px #999,0 0 2px #ddd inset;border-radius:50%;background-image:radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),radial-gradient(#fff 33%, transparent 33%),linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),linear-gradient(60deg,#4CAF50 33%, transparent 33%),linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),linear-gradient(0deg,#4CAF50 45%, transparent 45%),linear-gradient(60deg,#4CAF50 30%, transparent 30%),linear-gradient(120deg,#F44336 50%, transparent 50%),linear-gradient(180deg,#F44336 30%, transparent 30%);background-position:0 0; }復制代碼- Opera
利用漸變實現 , 代碼如下：
/*Opera*/ .Opera{position: absolute;top: 50%;left: 50%;width: 170px;height: 200px;transform: translate(-50%, -50%);border-radius:50%;box-shadow:0 2px 4px #333;background-image:linear-gradient(rgb(254, 135, 138) 0%, rgb(231, 22, 22) 50%, rgb(128, 0, 0) 85%, rgb(184, 3, 4) 100%); } .Opera:after{content:"";position: absolute;top:50%;left:50%;width: 60px;height: 180px;transform: translate(-50%, -50%);border-radius:50%;background:#fff; } .Opera:before{content:"";position: absolute;top:50%;left:50%;width: 72px;height: 185px;transform: translate(-50%, -50%);border-radius:50%;background:rgba(0,0,0,.4); }復制代碼- IE
利用漸變、多重陰影實現 ， 代碼實現如下：
/*IE*/ .IE{position: absolute;top: 50%;left: 50%;width:200px;height:200px;transform: translate(-50%, -50%);border-radius:50%;background-image:radial-gradient(#fff 38%, transparent 38%),radial-gradient(#09C 0%, #09C 100%);} .IE:before{content: "";width:285px;height:122px;background:none;border-radius:100%;position:absolute;top:33px;left:-45px;margin:auto;box-shadow:inset 0 12px 0 13px #09c,-35px -8px 0 -5px #fff;transform: rotate(-35deg); } .IE:after {content: "";width: 120px;height: 25px;background: #09c;position: absolute;top: 80px;left: 0;right: 0;margin: auto;box-shadow: 50px 23px 0 -2px #fff }復制代碼- safari
利用漸變、border、旋轉實現 ， 具體代碼如下：
/*safari*/ .safari{position: absolute;top: 50%;left: 50%;width:200px; height:200px;transform: translate(-50%, -50%);border-radius:50%;border:5px solid #E8E8E8;box-shadow:-1px 3px 1px 2px #999,-1px 3px 1px 2px #999 inset;background-image:radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),linear-gradient(#1DE3FF 0%, #1F52EF 100%);background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;background-repeat:no-repeat;background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;} .safari::before{content:"";position: absolute;top: 10px;left: 50%;border-radius:10px;border-bottom:100px solid rgba(255,255,255,.9);border-left:10px solid transparent;border-right:10px solid transparent;transform-origin:center 90px;z-index:-1;transform:translate(-50%, 0%) rotate(40deg); } .safari::after{content:"";position: absolute;top: 10px;left: 50%;border-radius:10px;border-bottom:100px solid rgba(255,0,0,.9);border-left:10px solid transparent;border-right:10px solid transparent;transform-origin:center 90px;transform:translate(-50%, 0%) rotate(220deg); } .safari:hover::before{transition:transform 1s;transform:translate(-50%, 0%) rotate(70deg); } .safari:hover::after{transition:transform 1s;transform:translate(-50%, 0%) rotate(250deg); }復制代碼- firefox
利用多重陰影實現 , 代碼如下：
/*firefox*/ .firefox{position: absolute;top: 50%;left: 50%;width: 200px;height:200px;transform: translate(-50%, -50%);border:8px solid #eee;border-radius:50%;overflow:hidden;background:#F48D00;box-shadow:0 0 2px 0 #999; } .firefox::before{content: "";width: 46px;height: 46px;background: #A4DFEF;border-radius: 100%;position: absolute;top: 90px;left: 50px;margin: auto;border: 1px solid #A4DFEF;box-shadow:-10px 0 0 5px rgba(164, 223, 239, .2),16px -60px 0 8px rgba(164, 223, 239, .2),-30px -50px 0 8px #F48D00,25px -38px 0 0px #A4DFEF,-30px -30px 0 12px #F48D00,15px -60px 0 8px #A4DFEF,33px 31px 0 -15px #A4DFEF,30px 17px 0 -13px #F48D00,20px -10px 0 0px #A4DFEF,-8px -0px 0 19px #F48D00,30px 17px 0 0px #A4DFEF,24px 30px 0 15px #F48D00,20px -6px 0 28px #A4DFEF,45px 10px 0 35px #F48D00,-5px -57px 0 8px #F48D00,20px -23px 0 45px #A4DFEF,-5px -80px 0 8px #A4DFEF,-30px -70px 0 8px #F48D00,-5px -57px 0 8px #F48D00,43px -11px 0 55px #F48D00,22px -39px 0 55px #A4DFEF; } .firefox::after{content: "";width: 0px;height: 2px;background: linear-gradient(90deg,#F48D00 75% ,#333 30% );background-size: 35px 35px;position: absolute;top: 50px;left: 73px;margin: auto;border: solid;border-width: 12px 0 15px 30px;border-color: #A4DFEF #fff #A4DFEF transparent;box-shadow: inset 0px 0 0 50px #333; }復制代碼- 搜狗
利用文字、陰影實現 , 具體代碼如下：
/*sougou*/ .sogou{position: absolute;top: 50%;left: 50%;width: 200px;height:200px;transform: translate(-50%, -50%);border:8px solid #fff;box-shadow: 2px 1px 2px 2px #ccc;border-radius:50%;overflow:hidden;background:#4DA0ED; } .sogou::before{content:"S";position: absolute;line-height: 185px;top:0;left:0;right:0;bottom:0;color:#fff;font-weight:600;font-size:320px;text-align:center;text-shadow:3px 0 0px #337FC4,-5px 0px 0px #CDE4F0,0px 8px 0px #387FBF;transform:rotate(2deg);z-index:-10;overflow:hidden; }復制代碼- 利用濾鏡實現混合效果
利用 fliter:blur() 、filter:contrast() 實現 ， 代碼如下：
/*filter-mix*/ .filter-mix{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 300px;height: 200px;-webkit-filter:contrast(20);background:#fff; } .filter-mix::before{content:"";position: absolute;width:120px;height:120px;border-radius: 50%;background:#333;top:40px;left:0px;z-index:2;-webkit-filter:blur(6px);box-sizing:border-box;animation:filterBallMove 10s ease-out infinite;-webkit-animation:filterBallMove 10s ease-out infinite; } .filter-mix::after{content:"";position: absolute;width:80px;height:80px;border-radius: 50%;background:#3F51B5;top:60px;right:0px;z-index:2;-webkit-filter:blur(6px);animation:filterBallMove2 10s ease-out infinite;-webkit-animation:filterBallMove2 10s ease-out infinite;}@keyframes filterBallMove{50%{left:200px;} }@-webkit-keyframes filterBallMove{50%{left:200px;} }@keyframes filterBallMove2{50%{right:200px;} }@-webkit-keyframes filterBallMove2{50%{right:200px;} }復制代碼裝逼總結
怎么樣，是不是顛覆了你對 CSS3 的認識？
實際上 CSS3 帶給我們的遠不止這些東西，沒有做不到，只有想不到，只有你腦洞夠大，各種黑科技、酷炫的 CSS 必然也是手到擒來~
雖然你給不了 CSS3 全部，但它卻把全部給了你，騷年，加油吧~
這里推薦一下我的前端學習交流群：731771211，里面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴。最新技術，與企業需求同步。好友都在里面學習交流，每天都會有大牛定時講解前端技術!
點擊：加入
轉載于:https://juejin.im/post/5cd198d051882535ae6dd222
總結
以上是生活随笔為你收集整理的你以为 CSS 只是个简单的布局？装逼指南了解一下的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自定义推送模块
- 下一篇： unicone 字体 规范