-
<!-- 旋轉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選擇器的訓練
查看全部 -
有點生疏了~
查看全部
舉報