模擬滑鼠點選特效
阿新 • • 發佈:2019-02-14
css
/* :hover block 盒子 ,可以設定寬高 inline 文字,不能設定寬高 * */ ul{ margin: 0;/*去掉外邊距*/ list-style: none; padding: 0;/*去掉內邊距*/ } body{ display: flex;/*盒子垂直居中,彈性盒模型,flex佈局*/ margin: 0; /*平滑漸變linear-gradient*/ background-image: linear-gradient(#f17c67 50%,#376956 50%); background-repeat: no-repeat; height: 100%;/*繼承父元素的高度*/ } html{ height: 100%;/*繼承視窗的高度*/ } .box{ display: flex;/*讓紫色變成和pink水平*/ margin:auto;/*盒子水平居中 margin:auto auto,上下,左右*/ /*width: 390px; 後面盒子要變小,不能設定絕對寬度*/ height: 90px; background-color: #fff; position: relative; } .box .list{ width:300px; height: 90px; transition: 0.5s; overflow: hidden; } .box .btn{/*必須要加空格*/ width: 90px; height: 90px; /*background-color: orchid;*/ position: relative;/*成為參照物*/ } .box .list ul li{ width: 75px; height: 90px; text-align: center; line-height: 90px; font-size: 14px; font-weight: bold;/*加粗*/ cursor: pointer;/*滑鼠移到字上出現小手*/ } .box .list ul{ display: flex; width: 300px; } .box .list ul li:hover{ color: #0cf; } /*偽元素:憑空生成的元素 before/after ,解決樣式缺陷性 偽類:狀態/滿足條件*/ .box .btn:before,.box .btn:after{ position: absolute;/*對應參照物的位置*/ left: 25px; top: 43px; display: block; content: ''; width: 40px; height: 4px; background-color: black; transform: rotate(45deg); transition: 0.5s; } .box .btn:after{ transform: rotate(-45deg); } .box .checkbox:checked~.btn:before{ top: 33px; transform: rotate(0deg); } .box .checkbox:checked~.btn:after{ top: 53px; transform: rotate(-180deg); } .box .checkbox{ margin: 0; right: 0; position: absolute; width: 90px; height: 90px; z-index: 1; opacity: 0/*透明度*/; } .box .checkbox:checked~.list{ width: 0; }