摘要:介绍介绍中国色感謝大佬的前端每日实战对我的启蒙已经有了的练习但这种练习并非刻意针对自己薄弱的问题而且对于一些概念还处于哦啊哈我懂了其实并不懂这种自欺欺人的状态所以也确定了一下我要总结区别于大佬总体的练习多篇文章会强化某一个属性第一篇
介绍
box-shadow 介绍中国色
感謝 comehope 大佬的 前端每日实战 对我的启蒙
已经有了 100+ 的练习, 但这种练习并非刻意针对自己薄弱的问题, 而且对于一些概念还处于 -- "哦, 啊哈, 我懂了(其实并不懂)" 这种自欺欺人的状态
所以也确定了一下我要总结区别于 comehope 大佬总体的练习, 多篇文章会强化某一个属性
box-shadow 第一篇
效果预览github.io 浏览源代码地址
https://github.com/shanyuhai1...
代码解读首先完成 html 结构
colorful buttons
完成标题的 样式
body { margin: 0; height: 100vh; font: normal 1em, sans-serif; display: flex; align-items: center; justify-content: center; background-color: black; } h1, h2 { letter-spacing: 1px; text-align: center; text-transform: capitalize; user-select: none; } h1 { font-size: 2em; color: #066; text-shadow: 1px 1px rgba(255, 255, 255, 0.7); } h2 { background: linear-gradient(45deg, #dbdcd7 0%, #ffffdcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
接着将全部按钮 button 设置初始样式
.button { font-size: 16px; font-weight: 700; color: white; /* default */ text-transform: uppercase; background: #d8d8d8; border: 2px solid; outline: none; padding: 1em 2em; margin: 0.5em; cursor: pointer; transition: all .6s, color .3s .4s; } .button:hover { color: #d8d8d8; }
添加 box-shadow 的 inset 动画
.button_top { color: #5c2223; border-image: linear-gradient(to right, #b92b27, #1565c0) 1 1; box-shadow: inset 0 2px 1px 0; } .button_top:hover { box-shadow: inset 0 4em 1px 0 #5c2223; } .button_right { color: #eba0b3; border-image: linear-gradient(to right, #c31432, #240b36) 1 1; box-shadow: inset -2px 0 1px 0; } .button_right:hover { box-shadow: inset -8em 0 1px 0 #eba0b3; } .button_bottom { color: #c8adc4; border-image: linear-gradient(to right, #b92b27, #1565c0) 1 1; box-shadow: inset 0 -2px 1px 0; } .button_bottom:hover { box-shadow: inset 0 -4em 1px 0 #c8adc4; } .button_left { color: #525288; border-image: linear-gradient(to right, #2980b9, #6dd5fa, #ffffff) 1 1; box-shadow: inset 2px 0 1px 0; } .button_left:hover { box-shadow: inset 8em 0 1px 0 #525288; } .button_tb { color: #131824; border-image: linear-gradient(to right, #8e2de2, #4a00e0) 1 1; box-shadow: inset 0 2px 1px 0, inset 0 -2px 1px 0; } .button_tb:hover { box-shadow: inset 0 4em 1px 0 #131824, inset 0 -4em 1px 0 #131824; } .button_lr { color: #1e9eb3; border-image: linear-gradient(to right, #1f4037, #99f2c8) 1 1; box-shadow: inset 2px 0 1px 0, inset -2px 0 1px 0; } .button_lr:hover { box-shadow: inset 8em 0 1px 0 #1e9eb3, inset -8em 0 1px 0 #1e9eb3; } .button_all { color: #45b787; border-image: linear-gradient(to right, #a80077, #66ff00) 1 1; box-shadow: inset 0 2px 1px 0, inset 0 -2px 1px 0, inset 2px 0 1px 0, inset -2px 0 1px 0; } .button_all:hover { box-shadow: inset 0 4em 1px 0 #45b787, inset 0 -4em 1px 0 #45b787, inset 8em 0 1px 0 #45b787, inset -8em 0 1px 0 #45b787; }
再添加 box-shadow 的 outset 动画
.buttons_outset .button { animation: 2s ease-in-out infinite; } .buttons_outset .button_top { animation-name: shaking-top; } .buttons_outset .button_right { animation-name: shaking-right; } .buttons_outset .button_bottom { animation-name: shaking-bottom; } .buttons_outset .button_left { animation-name: shaking-left; } .buttons_outset .button_tb { animation-name: shaking-tb; } .buttons_outset .button_lr { animation-name: shaking-lr; } .buttons_outset .button_all { animation-name: shaking-all; } @keyframes shaking-top { 50% { color: #d8d8d8; box-shadow: 0 -2px 1px 0; background: #5c2223; } } @keyframes shaking-right { 50% { color: #d8d8d8; box-shadow: 2px 0 1px 0; background: #eba0b3; } } @keyframes shaking-bottom { 50% { color: #d8d8d8; box-shadow: 0 2px 1px 0; background: #c8adc4; } } @keyframes shaking-left { 50% { color: #d8d8d8; box-shadow: -2px 0 1px 0; background: #525288; } } @keyframes shaking-tb { 50% { color: #d8d8d8; box-shadow: 0 -2px 1px 0, 0 2px 1px 0; background: #131824; } } @keyframes shaking-lr { 50% { color: #d8d8d8; box-shadow: -2px 0 1px 0, 2px 0 1px 0; background: #1e9eb3; } } @keyframes shaking-all { 50% { color: #d8d8d8; box-shadow: 0 -2px 1px 0, 0 2px 1px 0, -2px 0 1px 0, 2px 0 1px 0; background: #45b787; } }最后
我果然缺乏审美, 自己做的好丑
欢迎大佬补充对 box-shadow 属性的用法
指出我在书写中的不规范及更好的写法
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114116.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbirKY?w=400&h=307); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbirKY?w=400&h=307); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。增加兔子跳动的动画增加兔子的腿的伸缩动画增加云朵飘动的动画大功告成 showImg(https://segmentfault.com/img/bVbfhOi?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可...
阅读 2928·2021-09-22 14:59
阅读 1740·2021-09-22 10:02
阅读 2048·2021-09-04 16:48
阅读 2139·2019-08-30 15:53
阅读 2920·2019-08-30 11:27
阅读 3370·2019-08-29 18:35
阅读 868·2019-08-29 17:07
阅读 2624·2019-08-29 13:27