Rumah > Artikel > hujung hadapan web > CSS3实现自定义“W”形运行轨迹效果实例
CSS3实现自定义“W”形运行轨迹效果实例
- 高洛峰asal
- 2017-03-31 10:16:272324semak imbas
整理文档，搜刮出一个CSS3效果：“W”形运行轨迹实例的代码，稍微整理精简一下做下分享。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#p{
width:900px;
height:400px;
border:2px solid black;
margin: 100px auto;
}
#span{
float:left;
display: block;
font-size: 100px;
width: 100px;
height: 100px;
line-height: 80px;
text-align: center;
border-radius: 50%;
background: radial-gradient(blue,green);
animation: move 4s ease 0s infinite alternate;
}
@keyframes move {
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(200px,300px);
}
50%{
transform: translate(400px,0px);
}
75%{
transform: translate(600px,300px);
}
100%{
transform: translate(800px,0px);
}
}
</style>
</head>
<body>
<p id="p">
<span id="span">w</span>
</p>
</body>
</html>Atas ialah kandungan terperinci CSS3实现自定义“W”形运行轨迹效果实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用CSS来进行网页排版 Artikel seterusnya：详解CSS3中字体平滑处理和抗锯齿渲染实例介绍