Home >Web Front-end >HTML Tutorial >css3 arrow effect_html/css_WEB-ITnose
css3 record1
I tried to write an arrow effect using css
The idea is to construct two arrows through span and span sub-element i by setting their pseudo-elements respectively, but there are two arrows constructed by i The line height is all 0. The asymptotic animation effect when hovering is the change in the height of the i arrow, and the same angle of rotate
css3 knowledge:
jsfiddle demo
Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transtion-property Take the CSS3 transition-property usage reference guide listed on teacher Zhang Xinxu’s blog
(transform can also be used as transition-property)
Set when an arrow starts to rotate The understanding of transform-origin is a bit confusing (I suddenly felt that I didn’t know how to rotate geometrically...2333)
Later I drew the coordinates and it became clear. The base point (0,0,0) is the origin, and the default value is (50%, 50%, 0), is the midpoint of the plane.
-webkit-transform-origin: 50% 70%; transform-origin: 50% 70%;
The above code is a 50% offset of the x-axis, 50% offset to the right, a 70% offset of the Y-axis, and a downward offset of 70 %.
It should be noted that
content must have this attribute even if it is ''.
Pseudo element exists as a child element of an attached element, such as the following code They are all child elements of i
.block-arrow .prev i::before, .block-arrow .prev i::after{ outline: 1px solid transparent; z-index: 0; position: absolute; left: 50%; top:50%; width: 3px; height: 50%; content: ''; background: #0099cc; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}