位置: IT常识 - 正文

css 实现太极效果(简单的css特效)

编辑:rootadmin
css 实现太极效果 目录一、简述二、太极效果制作一、简述

推荐整理分享css 实现太极效果(简单的css特效),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css写太极图,css特效代码,用css画太极,html5做个太极图,css实现太极图,用css画太极,css实现太极图,css实现太极图,内容如对您有帮助,希望把文章链接给更多的朋友!

本次主要介绍::after,::before,box-shadow这三个属性。

::after,::before这两个是伪类选择器,box-shaow是用来设置元素的阴影效果 before:向选定的元素前插入内容 after:向选定的元素后插入内容 使用content 属性来指定要插入的内容,值可以为空,但是不能不写,如果不写的话伪类选择器就不会显示出来。

例如以下代码:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>test</title> <style>div:before{ content:"- 注意-";}</style></head><body><div>我的名字是 Donald</div></body></html>css 实现太极效果(简单的css特效)

伪类选择器的内容是不可选中的

二、太极效果制作

1.第一步:编写html部分 我们只需要定义一个div标签即可,用它来完成太极的制作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极</title></head><body> <div></div></body></html>

2.第二步:设置div的样式

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }

这里的box-shadow的第一个值是x轴移动的值,第二个值是y轴移动的值,第三个值代表模糊度,第四个是阴影的颜色。 效果: 第三步:通过伪类选择器画出两个小圆

div::after,div::before{ content: ""; display: block; border-radius: 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}

content必须要写出来,值为空也可以,如果不写的话伪类选择器就不会显示。 设置它的边框颜色为黑色,然后就可以和大圆的黑色部分连接起来了。 效果: 4.第四步:将after的边框和背景分别改成白色和黑色。

/*覆盖上面::after的border和background-color两个属性*/div::after{ border: 50px solid white; background-color: black;}

效果: 5.当然你也可以给它个动画让它动起来,当我们鼠标移动到太极上时它就开始转动

div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}

CSS完整代码:

body{ background-color: antiquewhite;}div{ width: 150px; height: 300px; margin: 100px auto; background-color: white; border-radius: 50%; border-right: 150px solid black; box-shadow: 0px 0px 30px blueviolet; }div:hover{ animation: mytest 2s linear infinite; }@keyframes mytest { to{ transform: rotate(360deg); }}div::after,div::before{ content: ""; display: block; border-radius : 50%; margin-left: 75px; border: 50px solid black; background-color: white; width:50px; height: 50px;}div::after{ border: 50px solid white; background-color: black;}
本文链接地址:https://www.jiuchutong.com/zhishi/298349.html 转载请保留说明!

上一篇:ReID行人重识别(训练+检测,附代码),可做图像检索,陌生人检索等项目(行人重识别map)

下一篇:震撼,支持多模态模型的ChatGPT 4.0发布了(多模手机)

  • 知识产权入股需要过户给对方么
  • 外国驻华使领馆自用车辆
  • 已启动申报比对异常申报,可以作废嘛清卡吗
  • 退回投资款怎么做账
  • 收到赞助商品的发票
  • 定额发票验旧后怎么报税
  • 现金流量表中购建固定资产怎么计算
  • 库存商品进价成本
  • 无形资产报废的例题
  • 小规模纳税人季报还是月报?
  • 存货周转率多少好
  • 自产自用增值税组成计税价格
  • 年报所得税与季报的区别
  • 收到福利费会计分录
  • 外出什么意思?
  • 兼职教师个人所得税起征点
  • 增值税发票抵扣期限最新规定
  • 分公司发生修理费能否在总公司列支?
  • 上月计提的工资,下月做调整
  • 收到其他与经营活动有关的现金减少
  • 销项税现金流量表在附表中如何列示
  • win10任务栏不显示最近
  • 缴纳人身意外保险凭证是什么
  • 使用最新版本的浏览器可以防御黑客
  • 增值税征税范围中的货物包括
  • 发票开错重新开票怎么做账务处理?
  • 关于php中的各种循环说法正确的是
  • 资产负债表和利润表的认定
  • 浅谈php中变量的使用情况
  • 工会账户必须是专用账户吗
  • 博客管理系统开题报告
  • vue前端模板网站
  • 【手撕Transformer】Transformer输入输出细节以及代码实现(pytorch)
  • ps怎么选中图形放大
  • 营业收入和应收账款增长过快,而应
  • 床垫可以开专票抵扣吗
  • 帝国cms升级到7.5后不能发布内容信息
  • 外资公司股东
  • dev怎么保存项目
  • 怎么看企业用哪种软件
  • 企业适用的增值税税率
  • 未确认融资费用怎么算
  • sql server 2014删除
  • 公司购烟酒怎么入账
  • 加盟代理需要什么手续
  • 递延收益按多少折算
  • 买家退货少了犯什么法
  • 自建不动产领用原材料增值税进项
  • 公司验资报告多少钱
  • 进口免税产品如何开票
  • 非同一控制下企业合并取得的长期股权投资
  • 应收账款和预收账款都是企业的流动资产
  • 最新的会计规定出台时间
  • 小规模转一般纳税人进项票如何处理
  • 应收账款转回坏账怎么办
  • sql优化的一般步骤
  • centos yun
  • 无法安装mysql数据库
  • dos下如何安装win7
  • windows内存诊断是干什么的
  • 磁盘已满
  • win7系统控制面板在哪里打开
  • 重装系统的简写
  • 系统设置用户密码在哪里
  • centos6基础命令
  • windows7无法激活怎么解决方法
  • linux命令怎么删除
  • linux dfs
  • win7图标随便移动
  • BootStrap glyphicons 字体图标实现方法
  • 基于javaweb的物流管理系统
  • 安卓中的多线程
  • 有哪些小工具
  • dos命令中的cd命令
  • 模仿文明
  • AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
  • 超清晰的壁纸
  • 国内免费机场
  • 广州市地方税务局官网
  • 12366人工服务时间节假日上班吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设