-
<!-- 旋转rotate（）函数，设置一个角度值，用来指定旋转的幅度。如果这个值为正直，元素对原点中心顺时针旋转；如果这个值为负值，元素相对中心逆时针旋转。
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted blue;
}
.wrapper div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-30deg);
}
.wrapper span {
display:block;
background:;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform:rotate(20deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
</body>
</html>
查看全部 -
h1:before {
content:"我是被插进来的";
color: red;
}
h1:after {
/*content: url("https://img1.sycdn.imooc.com//user/5458689e000115c602200220-40-40.jpg");*/
/*content: attr(title);*/
content: 'content';
}
查看全部 -
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
@media screen{
body {
background: linear-gradient(to top left, #333, #999);
}
@media print {
background: linear-gradient(to top right, #999, #333);
}
}
查看全部 -
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align:center;
color: white;
background: red;
margin: 20px auto;
transition: all 1s .3s;
}
div:hover {
background: cyan;
height: 400px;
width: 400px;
line-height: 400px;
font-size: 1.5em;
}
查看全部 -
inline内联元素不能rotate
查看全部 -
ul > li:only-child ,
ol > li:only-child
{
color: red;
}
查看全部 -
.wrapper > div:nth-of-type(2n + 1) {
color: red;
}
查看全部 -
.wrapper > p:first-of-type,
.wrapper > div:first-of-type {
color: red;
}
.wrapper > p:last-of-type,
.wrapper > div:last-of-type {
color: yellow;
}
查看全部 -
/*正数第2个*/
ol>li:nth-child(2) {
color: red;
}
/*倒数第2个*/
ol>li:nth-last-child(2) {
color: orange;
}
查看全部 -
ol>li:nth-child(2n+1) {
color: red;
}
ol>li:nth-child(odd) {
color: red;
}
查看全部 -
TODO TODO
查看全部 -
div:not(#footer)
而非
div:not(div#footer)
查看全部 -
CSS选择器的训练
查看全部 -
有点生疏了~
查看全部
举报