2020-03-04日常

案例一

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.box{

width:?100px;

height:?100px;

background:?#f00;

margin:?0?auto;

/*animation-name: move;

animation-duration: 5s;

animation-delay: 1s;

animation-timing-function: linear;

animation-iteration-count: infinite;*/

/*animation-direction: reverse;*/?/*反方向*/

/*animation-fill-mode: forwards; ??停在結(jié)束位置，不反回原點 */

animation:?move?5s?linear?infinite?reverse;

}

div:hover{

animation-play-state:?paused;

}

/*方法一*/

/*@keyframes move{

from{transform: translate(0);}

to{transform: translateX(200px);}

}*/

/*方法二*/

@keyframes move{

0%{transform:?translate(0,0);}

25%{transform:?translate(300px,0);background:?yellow;}

50%{transform:?translate(300px,300px);background:?yellowgreen;}

75%{transform:?translate(0,300px);background:?cyan;}

100%{transform:?translate(0,0);}

}

</style>

</head>

<body>

<div class="box">

</div>

</body>

</html>


案例二

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

div{

width:?100px;

height:?100px;

background:?#f00;

margin-bottom:?20px;

/*animation-name: play;*/

animation-name:?play;

animation-duration:?5s;

animation-delay:?2s;

animation-timing-function:?linear;

}

div:nth-child(1){

animation-fill-mode:?none;

}

div:nth-child(2){

animation-fill-mode:?backwards;

}

div:nth-child(3){

animation-fill-mode:?forwards;

}

div:nth-child(4){

animation-fill-mode:?both;

}

@keyframes play{

0%{transform:?translate(0,0);background:?yellowgreen;}

100%{transform:?translate(300px,0);}

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

案例三

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin:?0;

padding:?0;

}

li{

list-style:?none;

}

.nav{

width:?500px;

height:?100px;

margin:?50px?auto;

border:?2px?solid?#000;

}

.nav?li{

float:?left;

margin:?20px;

}

.nav?li?img{

margin-right:?20px;

}

.nav?li:hover?img{

animation:?move?3s;

}

@keyframes move{

0%{transform:?translatey(0);opacity:?1;}

60%{transform:?translatey(-50px);opacity:?0;}

61%{transform:?translatey(30px);opacity:?0;}

100%{transform:?translateY(0);opacity:?1;}

}

</style>

</head>

<body>

<ul class="nav">

<li><img src="img/未標題-1.png"/>首頁</li>

<li><img src="img/未標題-2.png"/>主題</li>

<li><img src="img/未標題-3.png"/>尾部</li>

</ul>

</body>

</html>


案例四

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{

margin:?0;

padding:?0;

}

.box{

width:?100px;

height:?100px;

margin:?50px?auto;

position:?relative;

}

.box?span{

display:?block;

width:?10px;

height:?10px;

background:?#000;

border-radius:?50%;

position:?absolute;

animation:?play 1s?linear?infinite;

}

.box?div{

width:?100px;

height:?100px;

position:?absolute;

top:?0;

left:?0;

}

.box1?span:nth-child(1){

left:?0;

top:?0;

}

.box1?span:nth-child(2){

right:?0;

top:?0;

}

.box1?span:nth-child(3){

right:?0;

bottom:?0;

}

.box1?span:nth-child(4){

left:?0;

bottom:?0;

}

.box2{

transform:?rotate(45deg);

}

.box2?span:nth-child(1){

left:?0;

top:?0;

}

.box2?span:nth-child(2){

right:?0;

top:?0;

}

.box2?span:nth-child(3){

right:?0;

bottom:?0;

}

.box2?span:nth-child(4){

left:?0;

bottom:?0;

}

.box1?span:nth-child(1){

animation-delay:?0;

}

.box2?span:nth-child(1){

animation-delay:?0.1s;

}

.box1?span:nth-child(2){

animation-delay:?0.2s;

}

.box2?span:nth-child(2){

animation-delay:?0.3s;

}

.box1?span:nth-child(3){

animation-delay:?0.4s;

}

.box2?span:nth-child(3){

animation-delay:?0.5s;

}

.box1?span:nth-child(4){

animation-delay:?0.6;

}

.box2?span:nth-child(4){

animation-delay:?0.7s;

}

@keyframes play{

0%{transform:?scale(1);}

50%{transform:?scale(0);}

100%{transform:?scale(1);}

}

</style>

</head>

<body>

<div class="box">

<div class="box1">

<span></span>

<span></span>

<span></span>

<span></span>

</div>

<div class="box2">

<span></span>

<span></span>

<span></span>

<span></span>

</div>

</div>

</body>

</html>

案例五

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.box{

width:?180px;

height:?300px;

border:?2px?solid?red;

margin:?50px?auto;

background:?url(img/charector.png) no-repeat?0?0;

animation:?play 0.5s?step-start?infinite;

}

@keyframes play{

0%{background-position:?0?0;}

16%{background-position:?-180px?0;}

33%{background-position:?-360px?0;}

50%{background-position:?-540px?0;}

66%{background-position:?-720px?0;}

84%{background-position:?-900px?0;}

100%{background-position:?-1080px?0;}

}

</style>

</head>

<body>

<div class="box">

</div>

</body>

</html>


案例六

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{

margin:?0;

padding:?0;

}

li{

list-style:?none;

}

body{

perspective:?900px;

}

.box{

width:?500px;

height:?500px;

border:?2px?solid?red;

margin:?50px?auto;

position:?relative;

transition:?3s;

transform-style:?preserve-3d;

}

.box?li{

width:?200px;

height:?200px;

position:?absolute;

top:?0;

left:?0;

right:?0;

bottom:?0;

margin:?auto;

}

.box?li:nth-child(1){

background:?#f0f;

transform:?translatez(100px);

}

.box?li:nth-child(2){

background:?#00f;

top:?50px;

left:?50px;

}

.box:hover{

transform:?rotateY(360deg);

}

</style>

</head>

<body>

<ul class="box">

<li>1</li>

<li>2</li>

</ul>

</body>

</html>


案例七

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{

margin:?0;

padding:?0;

}

body,html{height:?100%;}

.box{

width:?100%;

height:?100%;

background:?url(img/2.jpg) no-repeat?0?0;

background-size:?cover;

}

.box1,.box2{

width:768px;

height:768px;

margin:?0?auto;

position:?relative;

}

.box1?img{

position:?absolute;

}

.img1{

top:?50%;

left:?0;

right:?0;

margin:?auto;

}

.img2,.img3{

position:?absolute;

top:0;bottom:0;

left:0;right:0;

margin:auto;

}

.box2?img:nth-child(1){

top:?-30px;

left:?0;

right:?0;

margin:?auto;

}

.box2?img:nth-child(2){

top:?0;

bottom:?0;

right:?0;

margin:?auto;

}

.box2?img:nth-child(3){

bottom:?-30px;

left:?0;

right:?0;

margin:?auto;

}

.box2?img:nth-child(4){

top:?0;

left:?0;

bottom:?0;

margin:?auto;

}

.box2?img:nth-child(5){

top:?70px;

right:?70px;

}

.box2?img:nth-child(6){

bottom:?70px;

right:?70px;

}

.box2?img:nth-child(7){

bottom:?70px;

left:?70px;

}

.box2?img:nth-child(8){

top:?70px;

left:?70px;

}

.img2,.box2{

animation:?lunzi 20s?linear?infinite;

}

.box1:hover?img{

animation-play-state:?paused;

}

.box1:hover?.box2{

animation-play-state:?paused;

}

@keyframes lunzi{

0%{transform:?rotate(0);}

100%{transform:?rotate(360deg);}

}

.box2?img{

animation:?diaolan 20s?linear?infinite;

}

@keyframes diaolan{

0%{transform:?rotate(0);}

100%{transform:?rotate(-360deg);}

}*</style>

</head>

<body>

<div class="box">

<div class="box1">

<img class="img1" src="img/bracket.png"/>

<img class="img2" src="img/fsw.png"/>

<img class="img3" src="img/big-title.png"/>

<div class="box2">

<img src="img/boy.png"/>

<img src="img/dog.png"/>

<img src="img/girl.png"/>

<img src="img/girls.png"/>

<img src="img/hairboy.png"/>

<img src="img/mimi.png"/>

<img src="img/mudog.png"/>

<img src="img/shamegirl.png"/>

</div>

</div>

</div>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形，我收集了32種圖形，在下面列出。直接用CSS3畫出這些圖形，要比...
    劍殘閱讀 9,982評論 0贊 8
  • 練習 <!DOCTYPE html> .loader-inner{ width:200px; height:200...
    wv_7bd8閱讀 200評論 0贊 0
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進行樣式設(shè)定的標簽（元素）”。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,729評論 0贊 6
  • Square #square{ width: 100px; height: 100px; background: ...
    情話_2ee5閱讀 363評論 0贊 1
  • 好的各位小伙伴 今天咱們來做一個 3D的旋轉(zhuǎn)盒子 制作3D旋轉(zhuǎn)盒子 老規(guī)矩，不要急著動手先來分析一波。先不管旋轉(zhuǎn)，...
    天諾IT技術(shù)閱讀 1,098評論 0贊 1

友情鏈接更多精彩內(nèi)容