background-image: linear-gradient 属性hover动画

1.效果
在这里插入图片描述

2.代码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>svg文字动画</title><link rel="stylesheet" href="test.css"><style>@property --property-color1 {syntax: "<color>";inherits: false;initial-value: yellow;}@property --property-color2 {syntax: "<color>";inherits: false;initial-value: green;}:root {--a:red;}#box {width: 800px;height: 300px;margin: 200px auto;cursor: pointer;color: var(--a);background-image: linear-gradient(60deg, var(--property-color1),  var(--property-color2));transition: --property-color1 .5s ease-out,--property-color2 .5s ease-out;}#box:hover {--property-color1: green;--property-color2: yellow;}#box2 {width: 800px;height: 300px;margin: 0 auto;cursor: pointer;background-image: linear-gradient(60deg, yellow,green,green,yellow);background-size: 200% 100%;background-position: 0% 0%;transition: all .4s ease-out;}#box2:hover {background-position: 100% 0%;}</style>
</head><body><div id="app"><div id="box">box</div><div id="box2">box2</div><div id="demoCanvas"></div><script></script></div>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3246204.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！