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)


相关推荐

  • [知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能

    [知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术、Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例。为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏伦老师的网易云课程,并结合自己的理解和技术分享了该系列专栏,从数据采集、数据展示、数据分析到知识图谱构建,文章后续还会讲解中文数据的实体识别、关系抽取、知识计算等。前面通过六篇文章基本构建了电影知识图谱,并且能显示选中节点相关联的边及属性。

  • 存储卡的使用方法大全

    存储卡的使用方法大全存储卡的使用方法大全现在购买诺基亚手机,尤其是其智能手机的朋友是越来越多了,与其他品牌的机型相比,诺基亚的手机有一个最大的优点,就是支持储存卡内存扩充的机型比较多,这让大家在使用中不必再担心手机容量的问题,这也体现了诺基亚“科技以人为本”的宣传口号。今天,就为大家讲一讲适用于诺基

  • Java中String转换为JSONArray发生错误[通俗易懂]

    Java中String转换为JSONArray发生错误[通俗易懂]直入主题:一个Map里面,有两种String:第一种解析的字符串结构keywords:[{keyword=关键字,matchType=1},{keyword=关键字,matchType=1}]这里假设Stringstr1=[{keyword=关键字,matchType=1},{keyword=关键字,matchType=1}]第二种解析的字符串结构keywords:[{…

  • erlang如何有效地监视大量的并发连接

    erlang如何有效地监视大量的并发连接

    2021年12月30日
  • ScaleAnimation 缩放动画效果[通俗易懂]

    ScaleAnimation 缩放动画效果[通俗易懂]ScaleAnimation(floatfromX,floattoX,floatfromY,floattoY,intpivotXType,floatpivotXValue,intpivotYType,floatpivotYValue) 参数说明: floatfromX动画起始时X坐标上的伸缩尺寸floattoX动画结束时X坐标上的伸缩尺寸fl

    2022年10月10日
  • vue父组件引入子组件_vue子组件传递方法给父组件

    vue父组件引入子组件_vue子组件传递方法给父组件子组件代码<template> <divclass=”item”@click=”gotoView($event)”> <divclass=”iconfont-box”> <slot></slot> </div> <divclass=”title”>Blog</div> </div></template><script>export

发表回复

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

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