写点什么

原来 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:38753

评论

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

工业互联网助力数字中国建设(新论)

工业互联网

【管理笔记11】优秀人才的十二个特质

L3C老司机

28天写作

聊聊如何做好计划

数列科技杨德华

28天写作

基于matlab的控制系统与仿真2-传递函数模型

AXYZdong

matlab 2月春节不断更

“云原生”的应用价值及关键属性解读

透彻解析!在字节跳动我是如何当面试官的,讲的明明白白!

欢喜学安卓

android 程序员 面试 移动开发

透彻解析!如何快速的开发一个完整的直播app,薪资翻倍

欢喜学安卓

android 程序员 面试 移动开发

MYSQL 索引篇(上)

new life

MySQL性能优化 执行计划 MySQL使用 索引性能

三、创建、更新和删除文档

Kylin

读书笔记 七日更 分布式数据库mongodb 二月春节不断更

压力太大的话,就放点气儿吧

道伟

28天写作

什么容易被记住——造梦师指南

Justin

心理学 28天写作 游戏设计

程序员心中的一道坎:主存的编址与计算和串并联系统!

冰河

程序员 操作系统 计算 编址 串并联系统

MYSQL 索引篇(下)

new life

MySQL MySQL性能优化 多字段联合验证 索引性能

lua 对象编程解读

程序员与厨子

lua 学习 编程

Kafka.05 - 生产者与消费者介绍

insight

kafak 2月春节不断更

上天的源码要不要——GitHub 热点速览 v.21.08

HelloGitHub

Python GitHub 开源 Go 语言

go get下载包失败问题

happlyfox

28天写作 2月春节不断更 Go 语言

如何监控Nginx的upstream后端server

运维研习社

nginx 负载均衡 zabbi

第5周作业_贷款申请流程图

园子

互联网金融

(28DW-S8-Day3) 比特币、 区块链是什么?

mtfelix

比特币 区块链 28天写作

这些面试题你会吗?连续四年百度Android岗必问面试题!深度好文

欢喜学安卓

android 程序员 面试 移动开发

如何解决深度推荐系统中的Embedding冷启动问题?

王喆

机器学习 深度学习 推荐系统 计算广告 Embedding

遇见ZooKeeper:初识

Jackey

zookeeper

我的配置中心知识整理

老白鹿

微服务 技术选型 配置中心 配置管理

【进阶】面试官问我Chrome浏览器的渲染原理(6000字长文)

我是哪吒

学习 程序员 chorme 28天写作 2月春节不断更

Selenium 常用方法与属性、鼠标悬停与 Select 操作

梦想橡皮擦

Python 28天写作 2月春节不断更

python爬虫-学习urllib和requests使用,模拟请求

大佬sam

二月春节不断更

Mybatis【19】-- Mybatis自关联多对多查询

秦怀杂货店

Mybatis【20】-- Mybatis延迟加载怎么处理?

秦怀杂货店

数据库 缓存 mybatis 加载

New转乾坤——云网融合真正的打开方式!

脑极体

28天瞎写的第二百四十一天:正念是不是迷信、玄学、神棍?

树上

冥想 28天写作 正念 迷信

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