分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

漂亮的按钮(CSS 过渡和链接样式)

发布时间:2023-09-06 01:49责任编辑:熊小新关键词:CSS

HTML 代码:

<body><a class="anniu" href="http://www.baidu.com/"> ???????百度一下</a></body>

CSS 代码:

/* CSS Document */.anniu{display:block;width:120px;height:40px;background-color:#333333;color:#FFFFFF;text-align:center;font-size:18px;line-height:40px;border-radius: 25px;border:none;box-shadow:none;text-decoration: none;transition: box-shadow 0.5s;-webkit-transition: box-shadow 0.5s;}.anniu:hover{ ???box-shadow:0px 0px 5px 1px #808080;}.anniu:active{ ???box-shadow:0px 0px 5px 1px #FF0000;}

详解

链接样式:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

transition属性:

  1、指定CSS属性的name,transition效果

  2、transition效果需要指定多少秒或毫秒才能完成

  3、指定transition效果的转速曲线

  4、定义transition效果开始的时候

漂亮的按钮(CSS 过渡和链接样式)

原文地址:https://www.cnblogs.com/blackfriday/p/8835330.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved