AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

原来 css 也能这么炫酷(一)

  • 2020-01-07
  • 本文字数:1239 字

    阅读完需:约 4 分钟

原来css也能这么炫酷(一)

在网页开发中,为了有更好地用户体验,我们常常会对一些交互元素添加动画效果来达到这个目的,我们知道 css3 有过渡动画和关键帧动画可以实现一些简单的动画效果,例如元素位置改变就可以通过提前定义好的动画使我们可以完整的看到整个元素移动的过程。好了,话不多说,直接上干货。


在开发中,按钮 button 想必大家都十分常用吧,但是你有没有想过怎么去做一个炫酷的按钮呢?某天,在写 css 时,突发奇想,玩出来了个’幽灵’按钮,哈哈,名字不重要,我们先看看按钮效果。



接下来,直接上代码:


(温馨提示:左右/上下滑动可查看全部代码)


<html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   <style type="text/css">       body {           background: #000;       }       .btn-st{               font-size:20px;               width:40px;               height:40px;               color:#fff;               border:0;               outline: 0;               position: fixed;               left: 50%;               background:rgba(0,0,0,0.3);               top:70px; ;z-index: 110;               transition-property: left,background;               transition-duration: 1s;               transition-timing-function: ease-in-out;       }       .line{               display:block;               box-sizing: border-box;               position:absolute;               background:#fff;               transition: all .2s ease-out         }       .line-top,.line-bottom{width: 0px;height:1px;}       .line-left,.line-right{width: 1px;height:0px;}       button:hover{box-shadow: 0 0 20px yellow;}
.line-top{top:-1px;left:-50px;} button:hover>.line-top{width:41px;left:-1px;}
.line-left{top:80px;left:-1px} button:hover>.line-left{height:41px;top:-1px;}
.line-right{right:-1px; bottom:80px;} button:hover>.line-right{height:42px; bottom:-1px;}
.line-bottom{bottom:-1px;right:-50px;} button:hover>.line-bottom{width:42px;right:-1px;} </style>
</head><body> <button type="button" id="btn" class="btn-st"> <span class="glyphicon glyphicon-menu-hamburger"></span> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> </button></body></html>
复制代码


很简单吧,其实就是通过对 4 个元素的定位偏移量做一个过渡动画,就可以实现了,有没有很炫呢?


好了,先上个小菜,接下来我们玩个大的,结合 js,来做一个特别酷炫的轮播切图,老规矩,上效果:



本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA


2020-01-07 15:38707

评论

发布
暂无评论
发现更多内容

一图看懂融云「百幄」数智办公平台

融云 RongCloud

办公 数智化

GaiaX开源解读 | 基于优酷业务特色的跨平台技术

阿里巴巴文娱技术

开源 移动开发 移动端开发

每日一题之Vue数据劫持原理是什么?

bb_xiaxia1998

Vue

手写现代前端框架diff算法-前端面试进阶

helloworld1024fd

JavaScript

navicat 绿化版

源字节1号

软件开发 前端开发 后端开发 小程序开发

大数据技术培训零基础学习怎么样

小谷哥

数据结构-二叉树中的操作

可口也可樂

数据结构 二叉树 10月月更

使用实时3D渲染软件创建身临其境的数字体验

Finovy Cloud

3D渲染 云渲染 图像软件

大数据技术培训零基础学习怎么样

小谷哥

react源码中的fiber架构

flyzz177

React

IM跨平台技术学习(六):网易云信基于Electron的IM消息全文检索技术实践

JackJiang

前端二面手写面试题总结

helloworld1024fd

JavaScript

“科技与狠活”梗爆火,食品安全焦虑问题怎么破?

旺链科技

区块链 产业区块链 食品安全 企业号十月PK榜

java中HashMap的设计精妙在哪?

华为云开发者联盟

Java 开发 华为云 企业号十月 PK 榜

使用参数非参数和机器学习方法分析印度降雨变化,能给我国带来什么警示?

GPU算力

java培训和自学相比效果如何

小谷哥

浅谈OpenHarmony LiteOS-A内核之基础硬件——中断控制器GIC400

OpenHarmony开发者

OpenHarmony

IPv4 用完,如今花钱才能重新使用获取?

郑州埃文科技

IP

TiKV 源码阅读三部曲(二)读流程

PingCAP

TiKV 源码解读

线下面授前端培训哪个机构好

小谷哥

C++中的继承

可口也可樂

c++ 继承 10月月更

手写JavaScript常见5种设计模式

helloworld1024fd

JavaScript

在vue的v-for中,key为什么不能用index?

bb_xiaxia1998

Vue

Python多任务实现方式(一)-----多进程

木偶

Python 进程 10月月更

告别宽表,用DQL成就新一代BI

石臻臻的杂货铺

大数据 BI 10月月更

C++中的多态

可口也可樂

c++ 多态 10月月更

前端高频vue面试题合集

bb_xiaxia1998

Vue

在北京web前端培训后好找工作

小谷哥

ShareSDK iOS端 UniversalLink生成最佳实践

MobTech袤博科技

ios universal link

react源码中的hooks

flyzz177

React

「聚变」前端 & 客户端 | 第十七届 D2 终端技术大会,来了

阿里巴巴终端技术

阿里巴巴 前端 移动端 客户端 D2

原来css也能这么炫酷(一)_语言 & 开发_Think体验设计_InfoQ精选文章