CSS效果
效果屬性
box-shadow/text-shadow/border-radius/background/clip-path
box-shadow
圖形陰影
<style type="text/css">.container{width: 50px;height:50px;background: red;box-shadow: 5px 5px 10px rgba(0,0,0,0.5)} </style> <body><div class="container"></div> </body> View Code內陰影?
<style type="text/css">.container{width: 50px;height:50px;background: red;box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5)} </style> <body><div class="container"></div> </body> View Code制作無寬度的border
<style type="text/css">.container{width: 50px;height:50px;background: red;box-shadow: 0px 0px 0px 5px blue;} </style> <body><div class="container"></div> </body> View Code?復制元素
<style type="text/css">.container{width: 10px;height:10px;border-radius: 5px;margin-left: 20px;background: red;box-shadow: 15px 0px 0px 0px blue,-15px 0px 0px 0px green;} </style> <body><div class="container"></div> </body> View Code作用
營造層次感
充當沒有寬度的邊框
? 復制元素可以實現一個div制作特殊效果
text-shadow
作用 文字立體感
border-radius
圓角矩形
圓角
半圈/扇形
一個奇怪的角
圓角矩形/圓角
<style type="text/css">.container{width: 50px;height:50px;border-radius: 10px;margin-left: 20px;background: red;} </style> <body><div class="container"></div> </body> View Code 半圓/扇形 <style type="text/css">.container{width: 50px;height:50px;margin-left: 20px;background: red;border-radius: 0;border-top-left-radius: 50px;} </style> <body><div class="container"></div> </body> View Code?一些奇怪的東西
<style type="text/css">.container{width: 50px;height:50px;margin-left: 20px;background: #fff;border-bottom: 1px solid #000;border-radius: 0;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;} </style> <body><div class="container"></div> </body> View Code?background
紋理、圖案
漸變
linear-gradient
radial-gradient
雪碧圖動畫
background-position
背景圖尺寸適應
background-size:cover/contain
?紋理
<style type="text/css">.container{width: 400px;height:50px;background: linear-gradient(45deg, transparent 0, transparent 49.5%, rgb(0, 0, 0) 49.5%, rgb(0, 0, 0) 50.5%, transparent 50.5%, transparent 100%),linear-gradient(135deg, transparent 0, transparent 49.5%, rgb(0, 0, 0) 49.5%, rgb(0, 0, 0) 50.5%, transparent 50.5%, transparent 100%); background-size: 30px 30px;} </style> <body><div class="container"></div> </body> View Code?紋理2
<style type="text/css">.container{width: 400px;height:50px;background: linear-gradient(135deg, #000 0%, #000 12.5%, transparent 12.5%, transparent 37.5%, #000 37.5%, #000 62.5%, transparent 62.5%,transparent 87.5%, #000 87.5%,#000 100%);background-size: 50px 50px;} </style> <body><div class="container"></div> </body> View Code?雪碧圖動畫
<style>.container{width: 20px;height: 20px;background: url('') no-repeat;background-size: 20px 40px;transition: background-position .4s;}.container:hover{background-position: 0 -20px;} </style> <body><div class="container"></div> </body> View Code?clip-path
? 對容器進行裁剪
常見的幾何圖形
自定義路徑
<style type="text/css">.container{width: 400px;height:224px;float: left;overflow: auto;background-image: url(./wow.jpg);background-repeat: no-repeat;background-size: contain;}.clip-path{clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);} </style> <body><div class="container"></div><div class="container clip-path"></div> </body> View Codehttp://bennettfeely.com/clippy/
3D變換
transform
translate/scale/skew/rotate
transform-style: preserve-3d? 3D旋轉效果
perspective 元素獲得透視效果， 3D立體感
perspective-origin? 觀察視角
<style type="text/css">.container{width: 200px;height: 200px;border: 1px solid red;position: relative;transform-style: preserve-3d;transform: translateZ(-100px);text-align: center;perspective: 500px;}.container div{position: absolute;width: 200px;height: 200px;background-color: #000;color:#fff;transition: transform .4s;transform-origin: left center;transform: translateZ(-100px);}.container .page2{background-color: green;}.container:hover .page2{transform: translateZ(-100px) rotateY(-135deg);}</style> <div class="container"><div class="page1">preserve-3d/perspective</div><div class="page2">學習3D變換</div> </div> View Code preserve-3d/perspective 學習3D變換3D輪播
<style type="text/css"> .wrapper{width: 600px;height: 337px;overflow: hidden;font-size: 0; } .container{position: relative;width: 600px;height: 337px;background-size: contain;perspective: 500px;transform-style: preserve-3d; } .container .col{position: absolute;height: 337px;width: 100px;transform-style: preserve-3d;transform-origin: 50% 50% 0;transition: transform 1s;transform: translateZ(-290px); } .container:hover .col{transform: translateZ(-290px) rotateX(60deg); } .container .col .row{width: 100%;height: 337px;position: absolute;top: 0;background-repeat: no-repeat;background-size: cover; } .row1{transform: rotateX(0deg) translateZ(290px); } .row2{transform: rotateX(-60deg) translateZ(290px); } .row3{transform: rotateX(-120deg) translateZ(290px); } .row4{transform: rotateX(-180deg) translateZ(290px); } .row5{transform: rotateX(-240deg) translateZ(290px); } .row6{transform: rotateX(-300deg) translateZ(290px); } .col0{left: 0; } .col1{left:100px; } .col2{left: 200px; } .col3{left: 300px; } .col4{left: 400px; } .col5{left: 500px; } .dot-wrapper{width: 600px;text-align: center; } .dot-wrapper .dot{display: inline-block;background-color: rgba(0,0,0,.5);width: 20px;height: 20px;border-radius: 50%;margin: 0 5px; } .dot-wrapper .dot.active{background-color: rgba(0,0,0,1); } </style> <body> <div class="wrapper"><div class="container"><div class="col col0" style="transition-delay: 0s;"><div class="row row1" style="background-image: url(1.jpg);background-position: 0 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: 0 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: 0 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: 0 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: 0 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: 0 0;"></div></div><div class="col col1" style="transition-delay: 0.2s;"><div class="row row1" style="background-image: url(1.jpg);background-position: -100px 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: -100px 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: -100px 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: -100px 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: -100px 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: -100px 0;"></div></div><div class="col col2" style="transition-delay: 0.4s;"><div class="row row1" style="background-image: url(1.jpg);background-position: -200px 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: -200px 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: -200px 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: -200px 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: -200px 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: -200px 0;"></div></div><div class="col col3" style="transition-delay: 0.6s;"><div class="row row1" style="background-image: url(1.jpg);background-position: -300px 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: -300px 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: -300px 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: -300px 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: -300px 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: -300px 0;"></div></div><div class="col col4" style="transition-delay: 0.8s;"><div class="row row1" style="background-image: url(1.jpg);background-position: -400px 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: -400px 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: -400px 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: -400px 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: -400px 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: -400px 0;"></div></div><div class="col col5" style="transition-delay: 1.0s;"><div class="row row1" style="background-image: url(1.jpg);background-position: -500px 0;"></div><div class="row row2" style="background-image: url(2.jpg);background-position: -500px 0;"></div><div class="row row3" style="background-image: url(3.jpg);background-position: -500px 0;"></div><div class="row row4" style="background-image: url(4.jpg);background-position: -500px 0;"></div><div class="row row5" style="background-image: url(5.jpg);background-position: -500px 0;"></div><div class="row row6" style="background-image: url(6.jpg);background-position: -500px 0;"></div></div></div> </div> <div id="dots" class="dot-wrapper"><span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span> </div> <script type="text/javascript">document.querySelector('#dots').addEventListener('click', function(e){var obj = e.targetvar dots = document.querySelectorAll('.dot')if (obj.tagName.toUpperCase() === 'SPAN') {for (var i = 0; i < dots.length; i++) {dots[i].className = 'dot'if (obj === dots[i]) {var cols = document.querySelectorAll('.col')for (var j = 0; j < cols.length; j++) {cols[j].style = 'transition-delay: ' + (j * 0.2) + 's;transform:translateZ(-290px) rotateX('+60*i+'deg)';}}}obj.className='dot active'}}) </script> </body> View Code 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6 1 2 3 4 5 6
轉載于:https://www.cnblogs.com/sonwrain/p/10498434.html
總結
- 上一篇： vue监听移动设备的返回事件
- 下一篇： CSS 组合选择符