名站导航为爱好css的朋友们提供相关的知识。
css教程 长文本及长链接自动换行的几种方法
方法一:你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比)
- 此篇文章具体介绍如下
VG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形。随着浏览器技术的进步,SVG在网页上的运用越来越多。SVG有很多优点,比如体积小、缩放时不失真、可以动态的改变,适合制作动画、格式可读,易于使用,搜索引擎优化等。
SVG在动画方面的表现格外优秀,本文主要是介绍SVG中的几个用于动画的元素,它们分别是:
- <animate>
- <animateMotion>
- <animateTransform>
- <mpath>
我将用具有坚定的演示里让大家明白这几个元素的具体用法。
<animate>元素的用法介绍
<animate>元素通常放置到一个SVG图像元素里面,用来定义这个图像元素的某个属性的动画变化过程。我们需要制定动画的持续时间,以及属性值的初始值和变化后的值。
<?xml version="1.0"?>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100">
<animate attributeType="XML"
attributeName="x"
from="-100" to="120"
dur="10s"
repeatCount="indefinite"/>
</rect>
</svg>
其中repeatCount
属性的取值可以是一数字,也可以是“indefinite”,意为无限循环。
<animateMotion>元素的用法介绍
<animateMotion>元素也是放置一个图像元素里面,它可以引用一个事先定义好的动画路径,让图像元素按路径定义的方式运动。
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="lightgrey" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>
<animateTransform>用法介绍
<animateTransform>元素对图形的运动和变换有更多的控制,它可以指定图形的变换、缩放、旋转和扭曲等。
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<polygon points="60,30 90,90 30,90">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
</polygon>
</svg>
其中type
属性的取值可以是translate | scale | rotate | skewX | skewY
等。
<mpath>元素的用法介绍
<svg width="100%" height="100%" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,SVG,动画CSS教程选择器总结
一 通用选择器