代碼
<link rel="stylesheet" href="css/style.css">
<title>開門大吉</title>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
css代碼
section {
width: 450px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
background: url("../images/timg.jpg") no-repeat;
position: relative;
perspective: 1000px;
}
.door-l,
.door-r {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s;/*兩個門都做過度效果*/
}
.door-l {
left: 0;
border-right:1px solid red;
transform-origin:left;/*左側(cè)盒子按左邊翻轉(zhuǎn)*/
}
.door-r {
right: 0;
border-left:1px solid red;
transform-origin:right;/*右側(cè)盒子按右邊翻轉(zhuǎn)*/
}
.door-l::before,
.door-r::before {/*偽元素就是插入一個元素標(biāo)簽*/
content:"";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50px;/*圓角*/
transform: translateY(-50%);
}
.door-l::before {
right: 5px;
}
.door-r::before {
left: 5px;
}
/*鼠標(biāo)經(jīng)過section盒子敬鬓，兩個門 盒子匹颤，翻轉(zhuǎn) ratateY*/
section:hover .door-l {
transform: rotateY(-130deg);
}
section:hover .door-r {
transform: rotateY(130deg);
}
結(jié)果
image.png
image.png
代碼
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div>
<img src="images/pu.jpg" height="224px" >
<img src="images/pu1.jpg" height="224px">
</div>
css代碼
div {
width: 224px;
height: 224px;
margin: 100px auto;
position:relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;/*不是正面對象屏幕啥繁，就隱藏*/
}
div:hover img {
transform: rotateY(180deg);
}
結(jié)果
image.png
image.png
代碼
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div></div>
css代碼
div {
width: 100px;
height: 100px;
background-color: pink;
/*animation: go 2s ease 0s infinite alternate; /*引用動畫*/
animation: go 5s infinite; /*引用動畫*/
/*animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數(shù) 是否反方向 */
/*動畫名稱自定義*/
/*infinite 無限循環(huán)*/
}
/*@keyframes 動畫名稱{} 定義動畫*/
@keyframes go {
0% { /*起始位置 等價于剛才的from*/
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(800px, 0, 0);
}
50% {
transform: translate3d(800px, 400px, 0);
}
75% {
transform: translate3d(0, 400px, 0);
}
100% {
transform: translate3d(0, 0, 0);/*100%相當(dāng)于結(jié)束*/
}
}
結(jié)果
image.png
代碼
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<hr>
<img src="images/qi.jpg" width="100px" >
<hr>
css代碼
img {
/*animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數(shù) 是否反方向*/
animation: car 5s infinite;
}
/*定義動畫*/
@keyframes car {
0% {
transform:translate3d(0, 0, 0);
}
50% {
transform:translate3d(1000px, 0, 0);
}
51% {/*車要掉頭夺谁，翻轉(zhuǎn)*/
transform:translate3d(1000px, 0, 0) rotateY(180deg); /*如果有多組變形都屬于transform 那我們用空格隔開就好了*/
}
99% {
transform:translate3d(0, 0, 0) rotateY(180deg);
}
100% {
transform:translate3d(0, 0, 0) rotateY(180deg);
}
}
結(jié)果
image.png
