老师,怎样才能把代码写的简练些.总觉得很冗长
1 | <!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> *{<br> padding: 0;<br> margin: 0;<br> }<br> .no0{<br> width: 800px;<br> height: 800px;<br> border: 1px solid #000;<br> margin: 50px auto;<br> padding: 100px;<br> border-radius: 50%;<br> }<br> .no0 .box{<br> width: 200px;<br> height: 200px;<br> margin: 100px;<br> position: relative;<br> float: left;<br> perspective: 500px;<br> }<br> .no0 .box::before{<br> content: '';<br> display: block;<br> width: 200px;<br> height: 200px;<br> background: url(cat.jpg) no-repeat center/100%;<br> border-radius: 50%;<br> border: 1px solid #000;<br> }<br> .no0 .box::after{<br> content: '';<br> display: block;<br> width: 200px;<br> height: 200px;<br> background: url(dog.jpg) no-repeat center/100%;<br> position: absolute;<br> top: 0;<br> left: 0;<br> border-radius: 50%;<br> border: 1px solid #000;<br> transform-origin: 0 0;<br> transition: transform 1s linear 0s;<br> }<br> .no0 .box:hover::after{<br> transform: rotateY(-180deg);<br> }<br> .no0 .no2::after{<br> transform-origin: 100% 0;<br> }<br> .no0 .no2:hover::after{<br> transform: rotateY(180deg);<br> }<br> .no0 .no3:hover::after{<br> transform: rotateX(180deg);<br> }<br> .no0 .no4::after{<br> transform-origin: 0 100%;<br> }<br> .no0 .no4:hover::after{<br> transform: rotateX(-180deg);<br> }<br> </style><br></head><br><body><br> <div class="no0"><br> <div class="box no1"></div><br> <div class="box no2"></div><br> <div class="box no3"></div><br> <div class="box no4"></div><br> </div><br></body><br></html><br> |
7
收起
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧