css练习例子

css练习例子

好看的搜索框：

404

你查看的页面貌似丢失了呢...

返回首页,查看更多内容.

* { padding: 0; margin: 0;}html,body { height: 100%;}body { background-color: rgba(223, 223, 255, 0.39); display: flex; justify-content: center; align-items: center;}.main-container { width: 80%; max-width: 1000px; max-height: 500px; min-width: 600px; background-color: white; font-size: 0; border-radius: 20px; box-shadow: 0 0 50px 0 rgba(146, 146, 146, 0.63);}.main-container .container-item { display: inline-block; vertical-align: middle; width: 50%;}.main-container .img-container { background-color: rgba(253, 216, 168, 0.692); border-top-left-radius: 20px; border-bottom-left-radius: 20px;}.main-container .text-container .code { font-size: clamp(150px,20vw,200px); font-family: 'Arial Narrow'; color: rgb(86, 86, 253); font-weight: bolder; text-align: center;}.main-container .text-container .msg { font-size: 18px; text-align: center; font-weight: 200; margin-bottom: 20px;}.main-container .text-container .action { font-size: 15px; font-weight: 200; text-align: center; text-decoration-line: underline; cursor: pointer;}

代办事件：

* { padding: 0; margin: 0;}html,body { height: 100%;}body { background-color: rgb(81, 43, 80); display: flex; justify-content: center; align-items: center;}.main-container { width: 300px;}.main-container .header { font-size: 25px; color: rgb(240, 208, 167); text-align: center; line-height: 80px;}.main-container .list-container > ul { list-style: none;}.main-container .list-container > ul >li { height: 50px; background-color: rgb(182, 104, 118); font-size: 16px; font-weight: 200; line-height: 50px; color: aliceblue; position: relative; border-bottom: 1px solid rgb(81, 43, 80); z-index: 1;}.main-container .list-container > ul >li>label>span { display: block; position: absolute; top: 0; left: 0; height: 50px; width: calc(100% - 70px); padding: 0 20px 0 50px; user-select: none; transition: .5s;}input[type='checkbox'] { width: 0;}input[type='checkbox']::before { width: 10px; height: 10px; content: ''; display: block; background-color: aliceblue; border: 5px solid aliceblue; border-radius: 20px; position: absolute; top: calc(50% - 10px); left: 10px; z-index: 3; transition: .5s;}input[type='checkbox']:checked::before { background-color: rgb(81, 43, 80);}input[type='checkbox']:checked+span { background-color: rgb(102, 55, 100); text-decoration: line-through;}

拆分汉字：

* { padding: 0; margin: 0;}html,body { height: 100%;}body { background-color: lightcoral; display: flex; justify-content: center; align-items: center;}.main-container { width: 100%; height: 120px; text-align: center; position: relative; transition: .5s;}.main-container .text { font-family: 'Barlow', sans-serif; font-size: 120px; line-height: 120px; height: 120px; text-transform: uppercase; position: absolute; top: 0; text-align: center; width: 100%;}.main-container .text:nth-child(1) { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}.main-container .text:nth-child(3) { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); transition: .5s;}.main-container .inner-text { height: 0px; overflow: hidden; font-family: 'Ubuntu', sans-serif; transform: scale(1,0); position: absolute; top: 60px; width: 100%; font-size: 60px; line-height: 70px; transition: .5s; text-align: center;}.main-container:hover { height: 190px;}.main-container:hover .inner-text { height: 70px; transform: scale(1,1);}.main-container:hover .text:nth-child(3) { top: 80px;}

会走的时钟：

新年贺卡：

*{ padding: 0; margin: 0; } body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #2c3e50; } .card{ width: 300px; height: 200px; background: #e67e22; display: flex; justify-content: center; align-items: center; font-size: 2em; color: #ecf0f1; position: relative; transform-style: preserve-3d; transform: perspective(900px) rotateX(45deg) rotateY(25deg); } .card::before, .card::after{ transition: 2s; background: #e74c3c; width: 50%; height: 100%; position: absolute; box-sizing: border-box; } .card::before{ content: '新年'; left:0; top: 0; display: flex; align-items: center; justify-content: flex-end; transform-origin: left; border-right: solid 2px #e67e22; padding-left: 10px; } .card::after{ content: '快乐'; right: 0; top: 0; display: flex; align-items: center; justify-content: flex-start; transform-origin: right; border-left: solid 2px #e67e22; padding-left: 10px; } .card:hover::before{ transform: rotateY(-180deg); } .card:hover::after{ transform: rotateY(180deg); }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。