css3样式设计图片(CSS3 制作的彩虹按钮样式)
类别:Web前端 浏览量:727
时间:2021-10-28 10:19:09 css3样式设计图片
CSS3 制作的彩虹按钮样式实现效果: 实现代码:html
<li class="buttons"> <h1>Simple hover effects with <code>box-shadow</code></h1> <button class="fill">Fill In</button> <button class="pulse">Pulse</button> <button class="close">Close</button> <button class="raise">Raise</button> <button class="up">Fill Up</button> <button class="slide">Slide</button> <button class="offset">Offset</button> </li>
CSS
/* https://developer.mozilla.org/en/docs/Web/CSS/box-shadow box-shadow: [inset?] [top] [left] [blur] [size] [color]; Tips: - We're setting all the blurs to 0 since we want a solid fill. - Add the inset keyword so the box-shadow is on the inside of the element - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right]) - Multiple shadows can be stacked - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy. */ .fill:hover, .fill:focus { box-shadow: inset 0 0 0 2em var(--hover); } .pulse:hover, .pulse:focus { -webkit-animation: pulse 1s; animation: pulse 1s; box-shadow: 0 0 0 2em rgba(255, 255, 255, 0); } @-webkit-keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--hover); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--hover); } } .close:hover, .close:focus { box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover); } .raise:hover, .raise:focus { box-shadow: 0 0.5em 0.5em -0.4em var(--hover); transform: translateY(-0.25em); } .up:hover, .up:focus { box-shadow: inset 0 -3.25em 0 0 var(--hover); } .slide:hover, .slide:focus { box-shadow: inset 6.5em 0 0 0 var(--hover); } .offset { box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color); } .offset:hover, .offset:focus { box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover); } .fill { --color: #a972cb; --hover: #cb72aa; } .pulse { --color: #ef6eae; --hover: #ef8f6e; } .close { --color: #ff7f82; --hover: #ffdc7f; } .raise { --color: #ffa260; --hover: #e5ff60; } .up { --color: #e4cb58; --hover: #94e458; } .slide { --color: #8fc866; --hover: #66c887; } .offset { --color: #19bc8b; --hover: #1973bc; } button { color: var(--color); transition: 0.25s; } button:hover, button:focus { border-color: var(--hover); color: #fff; } body { color: #fff; background: #17181c; font: 300 1em "Fira Sans", sans-serif; justify-content: center; align-content: center; align-items: center; text-align: center; min-height: 100vh; display: flex; } button { background: none; border: 2px solid; font: inherit; line-height: 1; margin: 0.5em; padding: 1em 2em; } h1 { font-weight: 400; } code { color: #e4cb58; font: inherit; }
以上就是CSS3 制作的彩虹按钮样式的详细内容,更多关于CSS3 按钮样式的资料请关注开心学习网其它相关文章!
您可能感兴趣
- css3弹性布局(CSS3弹性布局内容对齐justify-content属性使用详解)
- css3伸缩布局及图解(利用CSS3实现自定义滚动条代码分享)
- css3动画实现loading(CSS3实现粒子旋转伸缩加载动画)
- css3常用特性(css3学习之2D转换功能详解)
- html5表单元素自带验证功能(纯CSS3实现表单验证效果非常不错)
- javascript编写的小游戏(CSS3 实现NES游戏机的示例代码)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- 视图平滑动画(菜单栏 “三” 变形为“X”css3过渡动画)
- css3设置字体阴影(简单掌握CSS3将文字描边及填充文字颜色的方法)
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- css3导航菜单(CSS3实现的侧滑菜单)
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css3实现3d效果教程(纯 CSS3实现的霓虹灯特效)
- css3边框阴影的属性(css3 border-radius属性详解)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
热门推荐
- mysql在centos7中如何安装(阿里云centos7安装mysql8.0.22的详细教程)
- 数据库差异备份
- dedecms安装与配置详解(LuManager服务器管理软件安装DEDECMS软件图文教程)
- dedecms漏洞防范(浅析DedeCMS投票模块漏洞的解决方法)
- mysql读写分离代码实现(MySQL Router实现MySQL的读写分离的方法)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- dedecms文章怎么发(批量替换织梦DedeCMS所有文章来源和作者的方法)
- pyqt5 登录界面(pyqt5利用pyqtDesigner实现登录界面)
- datetimepicker怎么设置空值(浅谈amaze-ui中datepicker和datetimepicker注意的几点)
- web前端css总结(前端面试必备之CSS3的新特性)