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实用指南(css3截图_动力节点Java学院整理)
- css3背景渐变动画效果(css3制作的背景渐变动画效果)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- css3盒子布局(CSS3弹性伸缩布局之box布局)
- css3特性动画图(CSS3轻松实现清新 Loading 效果的简单实例)
- css3怎么改成3d(灵活运用CSS3特性绘制简易版围棋效果)
- css3怎么创建圆角(CSS3中border-radius属性设定圆角的使用技巧)
- css3基础选择器有哪些(对CSS3选择器的研究详解)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- css3背景制作(纯CSS3实现Material Design效果)
- css3多边形教学(使用css3绘制出各种几何图形)
- css3弹性盒模型常用属性(CSS3弹性盒模型开发笔记三)
- CSS3 border-radius实现边框圆角
- 必看 8月,相比七夕,更需要注意的是这些事(必看8月相比七夕)
- 8月23日11时16分将迎处暑,逐渐进入气象意义上的秋天(8月23日11时16分将迎处暑)
- 花不语 下 如果重来一次的话,你还会这么选择吗(花不语下如果重来一次的话)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)