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;   停在结束位置，不反回原点 */

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,700评论 0赞 8
  • 2020-03-04
    练习 <!DOCTYPE html> .loader-inner{ width:200px; height:200...
    wv_7bd8阅读 192评论 0赞 0
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,628评论 0赞 6
  • css自绘图形（兼容）
    Square #square{ width: 100px; height: 100px; background: ...
    情话_2ee5阅读 348评论 0赞 1
  • 制作一个3D的旋转盒子
    好的各位小伙伴 今天咱们来做一个 3D的旋转盒子 制作3D旋转盒子 老规矩，不要急着动手先来分析一波。先不管旋转，...
    天诺IT技术阅读 937评论 0赞 1