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:

transition

transform

pseudo-element::before ::after

jsfiddle demo

transition

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)

transform

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 %.

Pseudo element

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;}