<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b>的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
主要是使用box-shadow偏移核心代码: box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.42em #56c29e, -0.11em -0.83em 0 -0.44em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.477em #56c29e
这个效果是动态的,请复制下面所有代码到html里，运行网页即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.load {
width: 1.3em
height: 1.3em
border-radius: 20px
animation: xuanzhuan 2s infinite
background: red
margin: 48% auto
zoom: 3.0
}
@keyframes xuanzhuan {
0% {
-webkit-transform: rotate(0deg)
transform: rotate(0deg)
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
5%,
95% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
30% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.51em -0.66em 0 -0.46em #56c29e, -0.75em -0.36em 0 -0.52em #56c29e, -0.83em -0.03em 0 -0.58em #56c29e, -0.81em 0.21em 0 -0.70em #56c29e
}
55% {
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.29em -0.78em 0 -0.46em #56c29e, -0.43em -0.72em 0 -0.52em #56c29e, -0.52em -0.65em 0 -0.58em #56c29e, -0.57em -0.61em 0 -0.70em #56c29e
}
100% {
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
box-shadow: -0.11em -0.83em 0 -0.4em #56c29e, -0.11em -0.83em 0 -0.46em #56c29e, -0.11em -0.83em 0 -0.52em #56c29e, -0.11em -0.83em 0 -0.58em #56c29e, -0.11em -0.83em 0 -0.70em #56c29e
}
}
</style>
</head>
<body>
<div class="load">
</div>
</body>
</html>
