目录
放一下Css一些属性的简单例子~
1、animation
实现效果:
代码实现:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style type="text/css">
<!--
.demo{
width: 300px;
height:300px;
position: relative;
background-color: pink;
animation-name: test;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: none;
}
.test-t{
width: 300px;
height:300px;
position: relative;
margin: auto;
background: url("h5.jpeg") no-repeat;
border-radius: 150px;
animation: run 6s linear 0s infinite;
}
/* 关于keyframes关键帧的内容稍后介绍 */
@keyframes test{
0%{background-color: lightblue;}
30%{background-color: lightgreen;}
60%{background-color: lightgray;}
100%{background-color: black;}
}
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
-->
</style>
</head>
<body>
<div class="demo">
</div>
<div class="test-t"></div>
</body>
</html>
2、Gradiens
实现效果:
代码实现:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{width: 300px;height: 300px; background-image: linear-gradient(#e66465, #9198e5);}
.div2{width: 300px;height: 300px; background-image: linear-gradient(to right, red , yellow);}
.div5{width: 300px;height: 300px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))}
.div3{width: 300px;height: 300px;background-image: linear-gradient(to bottom right, #e66465, #9198e5);}
.div4{width: 300px;height: 300px;background-image: linear-gradient(-90deg, white, yellow)}
</style>
</head>
<body>
<div class="div1">从上到下的线性渐变</div>
<br>
<div class="div2">从左到右的线性渐变</div>
<br>
<div class="div3">从左上角开始(到右下角)的线性渐变</div>
<br>
<div class="div4">带有指定的角度的线性渐变</div>
<br>
<div class="div5">从左到右的线性渐变,带有透明度</div>
</body>
</html>