CSS3 transition 渐变特效

CSS3 transition 渐变特效transition的使用需要和hover搭配使用transition:属性持续的时间(s)ease-in/ease(曲线规律)多少秒后开始(s)transition:all持续时间(s)//简易写法<!DOCTYPEhtml><htmllang=”en”><head> <metacharset=”UTF-8″> <title>Document</title> <style> d

大家好,又见面了,我是你们的朋友全栈君。

transition的使用需要和 hover 搭配使用
transition:属性 持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s)
transition:all 持续时间(s) // 简易写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> div{ 
     width: 200px; height: 200px; background: pink; position: relative; top: 100px; margin: 0 auto; transition: width 0.5s ease-in, border-radius 0.5s ease-in, height 0.5s ease-in; } div:hover { 
     width: 400px; height: 400px; border-radius: 50% } input { 
     position: fixed; top: 50px; left:50%; margin-left: -50px; width: 100px; height: 30px; background: skyblue; border: 1px solid #ddd; border-radius: 10px; outline: none; /* 去除选中状态框 */ color: #000; /*transition: background 0.3s ease-in, /*复杂方式实现*/ /* color 0.3s ease-in; */ transition: all 0.3s; /* 简易方式实现 */ } input:hover { 
     background: blue; color: #fff; } </style>
</head>
<body>
	<div></div>
	<input type="button" value="按钮">
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158399.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ORA-01722: invalid number

    ORA-01722: invalid number

    2021年11月15日
  • 手把手教你搭建第一个Spring Batch项目

    手把手教你搭建第一个Spring Batch项目写在前面:我是「沸羊羊_」,昵称来自于姓名的缩写fyy,之前呕心沥血经营的博客因手残意外注销,现经营此账号。本人是个小菜,正向着全栈工程师的方向努力着,文章可能并不高产,也很基础,但每写一篇都在用心总结,请大佬勿喷。如果您对编程有兴趣,请关注我的动态,一起学习研究。感谢每位读者!文章目录一、概述二、实例1、新建springboot项目2、springboot项目配置一、概述SpringBatch是一个轻量级,全面的批处理框架。一个典型的批处理过程可能是:从数据库,文件或.

  • UE4/UE5 代理使用介绍[通俗易懂]

    UE4/UE5 代理使用介绍[通俗易懂]原创文章,转载请注明出处。UE4有一套代理机制,整理了一下做个介绍。也请大家做补充。有了代理,方便我们做代码设计,减轻耦合。文章里面的代码下载链接:代理单播代理二级目录三级目录多播代理二级目录三级目录单播代理二级目录三级目录多播代理二级目录三级目录…

  • 偷偷地告诉学弟学妹们一个高效学习编程的秘密!大学四年悄悄惊艳他们,嘘

    偷偷地告诉学弟学妹们一个高效学习编程的秘密!大学四年悄悄惊艳他们,嘘今天来给大家谈一谈如何高效地学习编程。无论什么时候,找到学习的目标,以及学习的套路都非常的重要。找不到的话,就只能事倍功半,付出了很多努力,却迟迟得不到最好的回报。三四年前,我特别喜欢收藏文章,觉得有些技术文写得真好,忍不住收藏了!等过了一段时间后,闲得无聊,就去翻收藏夹,想着学一波,谁知道竟然找不到——不是微信给我删了,而是收藏夹里躺的“尸体”实在是太多了,根本就找不到。后来,我就总结了一个小窍门——每周收藏夹里最多躺五篇文章,如果想进来第六篇,之前的必须得清一篇。别小看这个小窍门,它真的有督促我去

  • 走进webpack(3)– 小结「建议收藏」

    写这一系列的文章,本意是想要梳理一下自己凌乱的webpack知识,只是使用过vue-cli,修改过其中的一部分代码,但是对于一个简单项目从0开始搭建webpack的流程和其中的依赖并不是十分清楚。所以

  • 《Linux内核设计与实现》读书笔记(十六)- 页高速缓存和页回写

    《Linux内核设计与实现》读书笔记(十六)- 页高速缓存和页回写

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号