Главная » Языки программирования

Css border animation on hover

Содержание
  1. How to create animated border on hover
  2. 45 CSS Border Animations
  3. Related Articles
  4. Author
  5. Links
  6. Made with
  7. About a code
  8. Animated Border Gradient
  9. Author
  10. Links
  11. Made with
  12. About a code
  13. Rotating Border Animation
  14. Author
  15. Links
  16. Made with
  17. About a code
  18. Transparent Inner Border with Hover Effect
  19. Author
  20. Links
  21. Made with
  22. About a code
  23. Zig-Zag Border & Cool Hover Effect
  24. Author
  25. Links
  26. Made with
  27. About a code
  28. CSS Only Cool Hover Effect
  29. Author
  30. Links
  31. Made with
  32. About a code
  33. Border Gradient Hover Effect
  34. Author
  35. Links
  36. Made with
  37. About a code
  38. Fancy Border on Hover
  39. Author
  40. Links
  41. Made with
  42. About a code
  43. Fancy Border on Hover
  44. Author
  45. Links
  46. Made with
  47. About a code
  48. CSS Only Border Hover Effect
  49. Author
  50. Links
  51. Made with
  52. About a code
  53. Framed on Hover
  54. Author
  55. Links
  56. Made with
  57. About a code
  58. Fancy Border Radius CSS
  59. Author
  60. Links
  61. Made with
  62. About a code
  63. Houdini Gradient Border Animation
  64. Author
  65. Links
  66. Made with
  67. About a code
  68. Framed
  69. Author
  70. Links
  71. Made with
  72. About a code
  73. Input with Gradient-Border — Dark
  74. Author
  75. Links
  76. Made with
  77. About a code
  78. Dashed Border Icon Animations
  79. Author
  80. Links
  81. Made with
  82. About a code
  83. Fancy Animated Rainbow Border
  84. Author
  85. Links
  86. Made with
  87. About a code
  88. Magic Border Mixin
  89. Author
  90. Links
  91. Made with
  92. About a code
  93. Gradient Border
  94. Author
  95. Links
  96. Made with
  97. About a code
  98. Fancy Border Radius
  99. Author
  100. Links
  101. Made with
  102. About a code
  103. CSS Border
  104. Author
  105. Links
  106. Made with
  107. About the code
  108. Rotating Border
  109. Author
  110. Links
  111. Made with
  112. About a code
  113. Gold Border Shimmer
  114. Author
  115. Links
  116. Made with
  117. About the code
  118. Animating border-radius
  119. Author
  120. Links
  121. Made with
  122. About the code
  123. Border Animation
  124. Author
  125. Links
  126. Made with
  127. About a code
  128. CSS Border Animation
  129. Author
  130. Links
  131. Made with
  132. About the code
  133. Animating border-radius
  134. Author
  135. Links
  136. Made with
  137. About the code
  138. Border Animation CSS
  139. Author
  140. Links
  141. Made with
  142. About the code
  143. Stripe Border
  144. Author
  145. Links
  146. Made with
  147. About the code
  148. CSS Only Border Animation
  149. Author
  150. Links
  151. Made with
  152. About the code
  153. Button Border Slide Mixin
  154. Author
  155. Links
  156. Made with
  157. About the code
  158. Draw Borders from Center
  159. Author
  160. Links
  161. Made with
  162. About the code
  163. Border Composition and Animation
  164. Author
  165. Links
  166. Made with
  167. About the code
  168. Border Animation
  169. Author
  170. Links
  171. Made with
  172. About the code
  173. Border Animation
  174. Author
  175. Links
  176. Made with
  177. About the code
  178. CSS Border Hover Transitions
  179. Author
  180. Links
  181. Made with
  182. About a code
  183. CSS Border Transitions
  184. Author
  185. Links
  186. Made with
  187. About the code
  188. Animated Border
  189. Author
  190. Links
  191. Made with
  192. About the code
  193. Double Border Animation
  194. Author
  195. Links
  196. Made with
  197. About the code
  198. Border Animation
  199. Author
  200. Links
  201. Made with
  202. About the code
  203. Border-Gradient Mixin
  204. Author
  205. Links
  206. Made with
  207. About the code
  208. Border Animation Effect
  209. Author
  210. Links
  211. Made with
  212. About the code
  213. SVG Border Animation
  214. Author
  215. Links
  216. Made with
  217. About the code
  218. Animated Border Gradient Effect
  219. Author
  220. Links
  221. Made with
  222. About the code
  223. Border-Radius Animation
  224. Author
  225. How to create animated border using css3 or canvas while hover?
  226. My excepted output:
  227. 2 Answers 2
Читайте также:  Php mysql connect url

How to create animated border on hover

I want to create a hover effect like in this site: http://themes.creiden.com/circleflip/blog-with-sidebar/ Just hover over the «More» link. http://joxi.ru/uXHGU_3JTJBkDpt35Iw So I tried to do something like this, but I have only this variant http://jsfiddle.net/TY8CQ/ Code: HTML

body < padding: 100px; background: #f6f6f6; >a < display: block; width: 200px; position: relative; background: #fff; height: 40px; font: 14px/40px Tahoma; color: #39adf0; text-decoration: none; -webkit-transition: 0.2s; margin: auto; text-align: center; position: relative; >a:after < content: ''; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: #39adf0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; >a:before < content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 0; background: #39adf0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; >a:hover:after < width: 100%; >a:hover:before

But in the example (in the website) the stroke appears in order and in all sides. How can I do this? CSS3 only? Maybe with jQuery?

Buddy, it’s simple enough, you can get all the source code from the site you mentioned. It’s just a bit finicky and I’m not sure people are gonna help you «lift» someone elses code! Basically you’re on the wrong track in anycase as the effect you want to replicate consists of 4 elements not 2. Use your web-inspectory/firebug to investigate and see what happens on ‘hover’ in the CSS

Have you tried inspecting the element? There’s 3 spans inside that link, one with text, and two with borders, which get transformed with transitions. It’s more complex than your try, but it’s all there for everyone to analyze.

Читайте также:  Основные типы данных языка python

Источник

45 CSS Border Animations

Collection of hand-picked free HTML and CSS border animation code examples from Codepen, Github and other resources. Update of June 2021 collection. 13 new examples.

Author

Made with

About a code

Animated Border Gradient

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Rotating Border Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Transparent Inner Border with Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Zig-Zag Border & Cool Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Cool Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Border Gradient Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fancy Border on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fancy Border on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Only Border Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Framed on Hover

CSS only framed div on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fancy Border Radius CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Houdini Gradient Border Animation

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Framed

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Input with Gradient-Border — Dark

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Dashed Border Icon Animations

CSS icon animations success, warning and danger. Simple and clean icon animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fancy Animated Rainbow Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Magic Border Mixin

Magic border on hover, two styles: standard border and mask border (allows gradients etc).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Fancy Border Radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Border

Animated CSS border (using an SVG).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Rotating Border

Rainbow rotating border in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Gold Border Shimmer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Animating border-radius

mix-blend-mode : luminosity & animating border-radius on CSS. Resize the container to see how the color of the shapes and text in the block changes.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Border Animation

Border animation using clip-path .

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

CSS Border Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Animating border-radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Animation CSS

Author

Made with

About the code

Border Animation CSS

Pure CSS border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Stripe Border

Diagonal stripe border effects in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

CSS Only Border Animation

CSS-only border animation on hover. It needs a solid background in order to work.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Button Border Slide Mixin

Author

Made with

About the code

Button Border Slide Mixin

A Sass mixin for a link animation where the border slides around the link on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Draw Borders from Center

Author

Made with

About the code

Draw Borders from Center

Draw borders from the center of the box using psudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Composition and Animation

Author

Made with

About the code

Border Composition and Animation

Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Animation

Author

Made with

About the code

Border Animation

Attractive CSS border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Animation

Author

Made with

About the code

Border Animation

SVG ellipse border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Border Hover Transitions

Author

Made with

About the code

CSS Border Hover Transitions

Border hover transitions using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Border Transitions

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Animated Border

Author

Made with

About the code

Animated Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Double Border Animation

Author

Made with

About the code

Double Border Animation

A border animation in SVG using two lines.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Animation

Author

Made with

About the code

Border Animation

Pure CSS border animation without SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border-Gradient Mixin

Author

Made with

About the code

Border-Gradient Mixin

Implementation of border gradient that can be applied to elements with border-radius .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Animation Effect

Author

Made with

About the code

Border Animation Effect

Border animation effect with SVG and CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: SVG Border Animation

Author

Made with

About the code

SVG Border Animation

Simple and beautiful SVG border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Animated Border Gradient Effect

Author

Made with

About the code

Animated Border Gradient Effect

I’ve created an animated gradient border using CSS3 gradients and animations. I make changes to the background-position CSS property during animation to give the effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border-Radius Animation

Author

Made with

About the code

Border-Radius Animation

Experiment with border-radius animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Simon Goellner

Author

Источник

How to create animated border using css3 or canvas while hover?

I need to create a animated border while hovering .I tried with using css3 but not able to get the perfect solution.

My excepted output:

Image

So i like create a animated border like above image while hovering.Basically i need to draw a border while hovering. Please help any one for achieve this solution. Thanks in advance.

HI @Zac.Ledyard.Thanks for your response.If you can please share some example code using SVG. Sorry am new to SVG.

Here is an example of what I mean. You will have to play with the values a bit, but here is a working version: codepen.io/anon/pen/vOEdqj

2 Answers 2

You could do this with SVG though I don’t think this is possible with just one shape, but I may be wrong. You can do it with two overlayed . The third example is more similar to your graphics.

svg < width: 125px; height: 125px; transform: rotate(-90deg); >.svg_2, .svg_3 < transform: rotate(-130deg); >/* 377 is roughly the circumference of the circle */ /*. if you change the size you will need to alter this value too*/ .circle < stroke-dasharray: 377; stroke-dashoffset: 377; transition: all 1s ease; >.svg_3 .circle < stroke-dashoffset: 294; >.svg_1:hover .circle < stroke-dashoffset: 0; >.svg_2:hover .circle < stroke-dashoffset: 0; >.svg_3:hover .circle

Here’s how to do it in html canvas:

  • Listen for mousemove events and set a flag indicating if the mouse is inside the circle.
  • Run an animation loop that draws an increasing arc when hovering and a decreasing arc when bluring.

Here’s example code and a Demo:

var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); function reOffset() < var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; >var offsetX,offsetY; reOffset(); window.onscroll=function(e) < reOffset(); >var PI=Math.PI; var PI2=PI*2; var sweep=0; var radius=50; var linewidth=10; var hoverState='new'; var isInside=false; // canvas.width=radius*2+linewidth; // canvas.height=radius*2+linewidth; var cw=canvas.width; var ch=canvas.height; var cx=cw/2; var cy=ch/2; ctx.lineWidth=linewidth; ctx.beginPath(); ctx.strokeStyle='black'; ctx.arc(cx,cy,radius,0,PI2); ctx.stroke(); requestAnimationFrame(animate); $("#canvas").mousemove(function(e)); function handleMouseMove(e) < // tell the browser we're handling this event e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousemove stuff here var dx=mouseX-cx; var dy=mouseY-cy; isInside=dx*dx+dy*dyfunction animate(time) < hoverState=isInside?'hovering':'bluring'; if(hoverState=='hovering')if(hoverState=='bluring') if(sweep>PI2) < hoverState='idle'; sweep=PI2; >if(sweep <0)< hoverState='idle'; sweep=0; >// only redraw when hovering or bluring if(hoverState=='hovering' || hoverState=='bluring') < ctx.clearRect(0,0,cw,ch); // ctx.beginPath(); ctx.strokeStyle='black'; ctx.arc(cx,cy,radius,0,PI2); ctx.stroke(); // ctx.beginPath(); ctx.strokeStyle='green'; ctx.arc(cx,cy,radius,-PI/2,-PI/2+sweep); ctx.stroke(); >requestAnimationFrame(animate); >

Источник

Оцените статью
© 2024 Программирование