源计划-赛博风格作者卡片

Akilar

发布于 2023-01-30 15:40:06

2770

发布于 2023-01-30 15:40:06

文章被收录于专栏：Akilarの糖果屋 Akilarの糖果屋Akilarの糖果屋

再次声明，源计划-赛博的内容都是我尝试最近学到的新内容，试验我自己的想法而进行的。我目前的计划是尽快的把自己所思所想实现出来。所以没有足够的精力去把教程做成小白也能看懂的样子。

这个魔改本就不是为了没有前端基础的人准备的。看前做好备份，实现不了就回退。不甘心就学下前端。字体，配色，对齐这些鸡毛蒜皮的东西不要整天跑我这里来念叨bug，bug，bug。

点击查看更新记录

更新记录

2022-12-31:内测版

通过input标签选中后的checked搭配兄弟相邻选择器，实现持续控制显隐。
重写卡片布局。尽量简化卡片内容。
配色待优化。

点击查看参考教程

参考方向	教程原贴
参考了UI风格和配色样式	Neon-Space-Rainmeter
参考了UI风格和配色样式	JARVIS-Highpitched-OS
fontawesome图标文档	fontawesome
Flex布局参数解释	Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画	CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制	纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。	不可思议的CSS之clip-path
使用transform-origin控制旋转圆心	css3如何设置rotate旋转点

魔改步骤

重写[Blogroot]\themes\butterfly\layout\includes\widget\card_author.pug,

if theme.aside.card_author.enable
  .card-widget.card-author
    .item-headline
      i.fa-solid.fa-circle-user
      span= _p('aside.card_author')
    .author-main-content
      .author-check-content
        label.author-info(for="author-info")      
          input#author-info(type="checkbox" name="author-info")
          .author-avatar
            img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
          .author-name= config.author
      .author-switch-content
        input.switch-content(type="radio" name="switch-content" value="description")    
        label.author-description-box       
          .author-description!= theme.aside.card_author.description || config.description
        input.switch-content(type="radio" name="switch-content" value="social")
        label.author-social-box
          if theme.aside.card_author.button.enable
            a.card-author-button(href=theme.aside.card_author.button.link)
              i(class=theme.aside.card_author.button.icon)
              span=theme.aside.card_author.button.text
          if(theme.social)
            .social-icons
              !=fragment_cache('social', function(){return partial('includes/header/social')})
        input.switch-content(type="radio" name="switch-content" value="site-data")
        label.author-data-box
          .site-data
            a.data-item(href=url_for(config.archive_dir) + '/')
              .data-name= _p('aside.articles')
              .data-length= site.posts.length
            a.data-item(href=url_for(config.tag_dir) + '/')
              .data-name= _p('aside.tags')
              .data-length= site.tags.length
            a.data-item(href=url_for(config.category_dir) + '/')
              .data-name= _p('aside.categories') 
              .data-length= site.categories.length

新建[Blogroot]\themes\butterfly\source\css\_layout\cyber_card_author.styl,

//default color:
:root
  --card-author-avatar-groove-border: rgba(244, 252, 252, 0.3)
  --card-author-avatar-dashed-border: rgba(70, 162, 223, 0.3)
  --card-author-name-background: rgba(35, 32, 32, 0.8)
  --card-author-font-color: #ffffff
  --card-author-name-decoration: #ffa500
  --card-author-radio: rgba(73, 176, 245, 0.8)
  --card-author-radio-checked: rgba(252, 126, 0, 0.8)
[data-theme="dark"]
  --card-author-avatar-groove-border: rgba(146, 206, 241, 0.6)
  --card-author-avatar-dashed-border: rgba(0, 77, 119, 0.8)
  --card-author-name-background: rgba(80, 80, 80, 0.598)
  --card-author-font-color: #ffffff
  --card-author-name-decoration: #f2eff0
  --card-author-radio: rgba(73, 176, 245, 0.558)
  --card-author-radio-checked: rgba(212, 31, 31, 0.58)

.card-widget
  &.card-author
    height: auto
    width: 100%
    position: relative
    display: flex
    justify-content: center
    flex-direction: column
    .author-main-content
      .author-check-content
        label.author-info
          height: 150px
          width: 100%
          display: flex
          flex-direction: row
          align-items: center
          justify-content: space-around
          input[type="checkbox"]#author-info
            display: none
            &:checked
              &~ .author-name
                display: flex
                transform-origin: left
                animation: ejectrotate 0.4s cubic-bezier(0.59, 0.01, 0.48, 1.17) 1
          .author-avatar
            z-index: 1
            position: relative
            img
              width: w = 90px
              height: w
            &::before
              content: "";
              width: w = 90px
              height: w
              position: absolute;
              background: transparent;
              border: 10px groove var(--card-author-avatar-groove-border);
              box-shadow: 0 0 10px var(--card-author-avatar-dashed-border);
              border-radius: 50%;
              left: -10px;
              top: -10px;
              animation: borderrotate 3s linear infinite alternate
            &::after
              content: "";
              width: w = 80px
              height: w
              position: absolute;
              background: transparent;
              border: 5px dashed var(--card-author-avatar-dashed-border);
              box-shadow: 0 0 5px inset var(--card-author-avatar-groove-border);
              border-radius: 50%;
              left: 0px;
              top: 0px;
              animation: borderrotate 10s linear infinite
          .author-name
            background: var(--card-author-name-background)
            color:var(--card-author-font-color)
            box-shadow: 0 0 10px inset var(--card-author-avatar-groove-border);
            position: relative
            z-index: 0
            height: 100px
            display: none
            width: 160px
            align-items: center
            font-size: 30px
            justify-content: center
            margin: 0 0 0 -25px
            clip-path: polygon(0 20px, 20px 0, 100% 0, 100% 15px, calc(100% - 15px) 25px, calc(100% - 15px) calc(100% - 25px), 100% calc(100% - 15px), 100% 100%, calc(50% + 15px) 100%, 50% calc(100% - 15px), 20px calc(100% - 15px), 0 calc(100% - 30px))
            &::before
              content: ""
              position: absolute
              height: 100px
              width: 160px
              background: var(--card-author-name-decoration)
              clip-path: polygon(15% 30%, 30% 30%, 35% 20%, 20% 20%, 15% 30%, 40% 30%, 45% 20%, 60% 20%, 55% 30%, 35% 30%, 65% 30%, 70% 20%, 85% 20%, 80% 30%, 15% 30%, 15% 70%, 80% 70%, 85% 80%, 20% 80%, 15% 70%, 15% 30%)
      .author-switch-content
        width: 100%
        height: 200px
        display: flex
        flex-direction: row
        flex-wrap: nowrap
        justify-content: center
        input[type="radio"].switch-content
          width: 60px
          height: 0
          margin: 0 5px
          position: relative
          &::after
            content: ""
            width: 60px
            height: 20px
            background: var(--card-author-radio)
            display: block
          &[value="description"]
            &::after
              clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
            &:checked
              &::after
                background: var(--card-author-radio-checked)
              &~ .author-description-box
                clip-path: inset(0%);
          &[value="social"]
            &::after
              clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
              transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            &:checked
              &::after
                background: var(--card-author-radio-checked)
              &~ .author-social-box
                clip-path: inset(0%);
                transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
          &[value="site-data"]
            &::after
              clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
            &:checked
              &::after
                background: var(--card-author-radio-checked)
              &~ .author-data-box
                clip-path: inset(0%);
                transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
        label
          font-family: 'TaikoMagic';
          display: flex
          position: absolute;
          bottom: 0px;
          height: 160px;
          width: 100%
          align-items: center;
          justify-content: center;
          clip-path: inset(50%);
          transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
          &.author-description-box
            .author-description
              font-size: 18px!important;
              word-break: break-all
              color: var(--card-author-font-color)!important
          &.author-social-box
            flex-direction: column;
            .card-author-button
              color: var(--card-author-font-color)!important
            .social-icons
              a
                margin: 0 5px
                font-size: 26px!important
                
          &.author-data-box
            .site-data
              align-items: center;
              justify-content: center;
              display: flex;
              a
                margin: 0 20px;
                color: var(--card-author-font-color)

@keyframes ejectrotate
  0%
    transform: rotateZ(90deg);
    opacity: 0
  100%
    transform: rotateZ(0deg);       
    opacity: 1
@keyframes borderrotate
  0%
    transform: rotateZ(0deg);
  100%
    transform: rotateZ(360deg);

修改[Blogroot]\themes\butterfly\languages\zh-CN.yml,新增卡片名称：

  aside:
    articles: 文章
    tags: 标签
    categories: 分类
    Link: 友人帐
    About: 关于
+   card_author: 作者信息
    card_friend_link: 通讯录
    card_announcement: 告示牌

卡片外框是沿用了另一篇文章的版块。参考源计划-赛博风格侧栏卡片样式修改进行修改。本文不再赘述。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-12-31，如有侵权请联系 cloudcommunity@tencent.com 删除

css